<template>
  <div class="dashboard-editor-container">
    <div ref="bg_container" class="bgs">
      <el-dialog :title="title1" :visible.sync="open1" width="960px">
        <el-row :gutter="20">
          <el-row>
            <el-col class="machinery-prop-label" :span="5">设备名称：</el-col>
            <el-col class="machinery-prop-value" :span="7">{{ machineryDetail.machineryName }}</el-col>
            <el-col class="machinery-prop-label" :span="5">设备编码：</el-col>
            <el-col class="machinery-prop-value" :span="7">{{ machineryDetail.machineryCode }}</el-col>
          </el-row>
          <el-row>
            <el-col class="machinery-prop-label" :span="5">品牌：</el-col>
            <el-col class="machinery-prop-value" :span="7">{{ machineryDetail.machineryBrand }}</el-col>
            <el-col class="machinery-prop-label" :span="5">规格型号：</el-col>
            <el-col class="machinery-prop-value" :span="7">{{ machineryDetail.machinerySpec }}</el-col>
          </el-row>
          <el-row>
            <el-col class="machinery-prop-label" :span="5">所属车间：</el-col>
            <el-col class="machinery-prop-value" :span="7">{{ machineryDetail.workshopName }}</el-col>
            <el-col class="machinery-prop-label" :span="5">设备状态：</el-col>
            <el-col class="machinery-prop-status-run" :span="7">生产中</el-col>
            <!--            <el-col class="machinery-prop-status-run" :span="7">{{machineryDetail.status}}</el-col>-->
          </el-row>
          <el-row>
            <el-col class="machinery-prop-label" :span="5">设备负责人：</el-col>
            <el-col class="machinery-prop-value" :span="7">蒋坦然：17685523247</el-col>
          </el-row>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="7" :xs="24" class="cardDataCol">
            <el-row class="dataTitle">
              <span>功率</span>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="20">额定功率（kW）</el-col>
              <el-col class="dataValue" :span="4">{{ machineryData.ratedPower }}</el-col>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="20">有功功率（kW）</el-col>
              <el-col class="dataValue" :span="4">{{ machineryData.activePower }}</el-col>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="20">无功功率（kW）</el-col>
              <el-col class="dataValue" :span="4">{{ machineryData.reactivePower }}</el-col>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="20">有功功率/无功功率</el-col>
              <el-col class="dataValue" :span="4">{{ machineryData.activeRated }}</el-col>
            </el-row>
            <el-row>
              <div class="machineryStatus">{{ machineryStatus }}</div>
            </el-row>
          </el-col>
          <el-col :span="1">
            <el-divider direction="vertical" class="divider2-machinerydetail" />
          </el-col>

          <el-col :span="7" :xs="24" class="cardDataCol">
            <el-row class="dataTitle">
              <span>电流</span>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="20">额定电流（A）</el-col>
              <el-col class="dataValue" :span="4">{{ machineryData.ratedCurrent }}</el-col>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="20">A相电流</el-col>
              <el-col class="dataValue" :span="4">{{ machineryData.aPhaseCurrent }}</el-col>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="20">B相电流</el-col>
              <el-col class="dataValue" :span="4">{{ machineryData.bPhaseCurrent }}</el-col>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="20">C相电流</el-col>
              <el-col class="dataValue" :span="4">{{ machineryData.cPhaseCurrent }}</el-col>
            </el-row>
            <el-row>
              <div class="machineryStatus">{{ machineryStatus }}</div>
            </el-row>
          </el-col>
          <el-col :span="1">
            <el-divider direction="vertical" class="divider2-machinerydetail" />
          </el-col>

          <el-col :span="7" :xs="24" class="cardDataCol">
            <el-row class="dataTitle">
              <span>功率因数</span>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="18">参见功率因数</el-col>
              <el-col class="dataValue" :span="6">{{ machineryData.seePowerFactor }}</el-col>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="18">A功率因数</el-col>
              <el-col class="dataValue" :span="6">{{ machineryData.aPowerFactor }}</el-col>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="18">B功率因数</el-col>
              <el-col class="dataValue" :span="6">{{ machineryData.bPowerFactor }}</el-col>
            </el-row>
            <el-row>
              <el-col class="dataLabel" :span="18">C功率因数</el-col>
              <el-col class="dataValue" :span="6">{{ machineryData.cPowerFactor }}</el-col>
            </el-row>
            <el-row>
              <div class="machineryStatus">{{ machineryStatus }}</div>
            </el-row>
          </el-col>
        </el-row>

        <el-row :gutter="20" />
      </el-dialog>
      <el-dialog :title="title" :visible.sync="open" :modal="false" width="560px">
        <div class="btn">
          <!--        <span>横向间隔</span><el-input type="number" size="mini" v-model.number="startGap" placeholder="初始横向间隔"></el-input>-->
          <!--        <div style="margin: 20px 0;"></div>-->
          <span>速度比例</span>
          <el-input v-model.number="glassSpeedScale" type="number" size="mini" placeholder="速度比例" />
          <div style="margin: 20px 0;" />
          <span>速度</span>
          <el-input v-model.number="runSpeed" type="number" size="mini" placeholder="速度" />
          <div style="margin: 20px 0;" />
          <!--        <span>总动画片数</span><el-input size="mini" v-model.number="allGlass" placeholder="总动画片数"></el-input>-->
          <!--        <div style="margin: 20px 0;"></div>-->
          <div style="display: none">
            <span>总发片数</span><el-input v-model.number="allGlass" size="mini" placeholder="总动画片数" />
            <div style="margin: 20px 0;" />
            <span>已发片数</span><el-input v-model.number="pastGlass" size="mini" placeholder="总动画片数" />
            <div style="margin: 20px 0;" />
            <span>当前线上总片数</span><el-input v-model.number="nowGlass" size="mini" placeholder="总动画片数" />
            <div style="margin: 20px 0;" />
          </div>
          <el-button type="primary" @click="animateDraw">演示动画</el-button>
          <el-button type="success" @click="glassMovieDraw">动画开启</el-button>
          <el-button type="success" @click="timeFn2">动画接口</el-button>
          <el-button type="danger" @click="allClear">接口关闭</el-button>
        </div>
        <span slot="footer" class="dialog-footer" />
      </el-dialog>
      <div class="bgCanvas" :style="{ marginLeft: bgCanvasStyle + 'px' }">
        <canvas id="board" ref="board">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
        <canvas id="path" ref="path">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
        <canvas id="point" ref="point">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
        <canvas id="glass" ref="glassPiece">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
        <canvas id="glassSea" ref="glassSea">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
        <canvas id="glassIce" ref="glassIce">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
        <canvas id="glassMovie" ref="glassMovie">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
        <!-- <canvas id="dragTest" ref="dragTest">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>-->
      </div>
    </div>
    <div class="canvasEmbed">
      <canvasEmbed />
    </div>
    <div class="canvasEmbed1">
      <div>
        <dv-border-box-7>
          <canvasEmbed1 />
        </dv-border-box-7>
      </div>
    </div>
  </div>
</template>

<script>
import canvasEmbed from '@/views/canvasEmbed'
import canvasEmbed1 from '@/views/canvasEmbed1'
import { movieTest } from '@/api/current'
import { wireMainline, wireBranchline, wireDrop } from '@/api/stacking'

export default {
  components: { canvasEmbed, canvasEmbed1 },
  data() {
    return {
      // 面板按钮
      btnShow: false,
      // 设备
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        machineryCode: null,
        machineryName: null,
        machineryBrand: null,
        machinerySpec: null,
        machineryTypeId: null,
        machineryTypeCode: null,
        machineryTypeName: null,
        workshopId: null,
        workshopCode: null,
        workshopName: null,
        status: null
      },
      // 设备类型名称
      machineryTypeName: undefined,
      machineryData: {
        ratedPower: 200,
        activePower: 180,
        reactivePower: 20,
        activeRated: 180 / 200,

        ratedCurrent: 100,
        aPhaseCurrent: 100,
        bPhaseCurrent: 100,
        cPhaseCurrent: 100,

        ratedVoltage: 200,
        aPhaseVoltage: 200,
        bPhaseVoltage: 200,
        cPhaseVoltage: 200,

        seePowerFactor: 0.95,
        totalPowerFactor: 0.907,
        aPowerFactor: 0.905,
        bPowerFactor: 0.908,
        cPowerFactor: 0.908
      },
      // 设备状态
      machineryStatus: '未发现异常',
      // 物料产品表格数据
      machineryList: [],
      // 设备详情表单
      machineryDetail: {},
      bgWidth: 0,
      bgHeight: 0,
      startGap: 50,
      pastGlass: 0,
      nowGlass: 0,
      glassSpeedScale: 1,
      //  默认1分板尺寸
      glassWidth: 20,
      glassHeight: 35,
      imageScale: 6,
      // 路径点参数
      canvasPoint: {
        x0: 0,
        x1: 950,
        x2: 775,
        x3: 1033,
        x4: 1200,
        x5: 1640,
        x6: 715, // 落板前定位
        y0: 399,
        y1: 201,
        y2: 29,
        y3: 25,
        y4: 292 // 旋片定位
      },
      // 路径点参数2 主线 大机械手
      canvasPoint2: {
        yy0: 399,
        m1x: 1207,
        m1y: 423 + 27,
        m2x: 1276,
        m2y: 372 - 27,
        m3x: 1440,
        m3y: 423 + 27,
        m4x: 1498,
        m4y: 372 - 27
      },
      // 路径点参数3 主线 小机械手
      canvasPoint3: {
        yy0: 399,
        m1x: 1207,
        m1y: 423 + 27,
        m2x: 1276,
        m2y: 372 - 27,
        m3x: 1440,
        m3y: 423 + 27,
        m4x: 1498,
        m4y: 372 - 27
      },
      glassSeaEndPoint: {
        x: 0,
        y: 363,
        w: 705,
        h: 0
      },
      glassIceEndPoint: {
        x: 0,
        // y: 223,
        y: 363,
        w: 705,
        h: 0
      },
      // 动画数据
      glassMoviePointDataNew: {
        'msg': '操作成功',
        'code': 200,
        'data': [
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 2440,
            'pos': 652102,
            'headAt': 3292,
            'liteList': [
              {
                'level': 2,
                'width': 3660,
                'id': 4033,
                'dest': [
                  40,
                  41,
                  30,
                  31,
                  44,
                  34,
                  0,
                  0,
                  0,
                  0,
                  2,
                  5,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 2440,
            'pos': 511430,
            'headAt': 327,
            'liteList': [
              {
                'level': 2,
                'width': 3660,
                'id': 4034,
                'dest': [
                  40,
                  41,
                  30,
                  31,
                  44,
                  34,
                  0,
                  0,
                  0,
                  0,
                  2,
                  5,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 2440,
            'pos': 370672,
            'headAt': 324,
            'liteList': [
              {
                'level': 2,
                'width': 3660,
                'id': 4035,
                'dest': [
                  40,
                  41,
                  30,
                  31,
                  44,
                  34,
                  0,
                  0,
                  0,
                  0,
                  2,
                  5,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 2440,
            'pos': 229836,
            'headAt': 312,
            'liteList': [
              {
                'level': 2,
                'width': 3660,
                'id': 4036,
                'dest': [
                  40,
                  41,
                  30,
                  31,
                  44,
                  34,
                  0,
                  0,
                  0,
                  0,
                  2,
                  5,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 2440,
            'pos': 89386,
            'headAt': 303,
            'liteList': [
              {
                'level': 2,
                'width': 3660,
                'id': 4037,
                'dest': [
                  40,
                  41,
                  30,
                  31,
                  44,
                  34,
                  0,
                  0,
                  0,
                  0,
                  2,
                  5,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          }
        ]
      }, // 一分
      glassMoviePointData: {
        'msg': '操作成功',
        'code': 200,
        'data': [
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 1590,
            'pos': 299544,
            'headAt': 323,
            'liteList': [
              {
                'level': 3,
                'width': 1870,
                'id': 7378,
                'dest': [
                  32,
                  33,
                  36,
                  37,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  2,
                  3,
                  5,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 2,
                'width': 1730,
                'id': 7379,
                'dest': [
                  42,
                  43,
                  46,
                  47,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 1590,
            'pos': 234558,
            'headAt': 312,
            'liteList': [
              {
                'level': 1,
                'width': 1870,
                'id': 7380,
                'dest': [
                  32,
                  33,
                  36,
                  37,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  2,
                  3,
                  5,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 1730,
                'id': 7381,
                'dest': [
                  42,
                  43,
                  46,
                  47,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 2440,
            'pos': 135934,
            'headAt': 303,
            'liteList': [
              {
                'level': 2,
                'width': 3600,
                'id': 7382,
                'dest': [
                  40,
                  30,
                  44,
                  34,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  2,
                  5,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 1590,
            'pos': 70735,
            'headAt': 303,
            'liteList': [
              {
                'level': 1,
                'width': 1870,
                'id': 7383,
                'dest': [
                  32,
                  33,
                  36,
                  37,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  2,
                  3,
                  5,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 1730,
                'id': 7384,
                'dest': [
                  42,
                  43,
                  46,
                  47,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 1590,
            'pos': 6458,
            'headAt': 302,
            'liteList': [
              {
                'level': 5,
                'width': 1870,
                'id': 7385,
                'dest': [
                  61,
                  61,
                  61,
                  61,
                  61,
                  61,
                  0,
                  0,
                  0,
                  0,
                  2,
                  3,
                  5,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 1730,
                'id': 7386,
                'dest': [
                  42,
                  43,
                  46,
                  47,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 1590,
            'pos': 923350,
            'headAt': 402,
            'liteList': [
              {
                'level': 1,
                'width': 1870,
                'id': 7365,
                'dest': [
                  36,
                  37,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  2,
                  3,
                  5,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 1730,
                'id': 7366,
                'dest': [
                  46,
                  47,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 0,
            'pos': 0,
            'headAt': 0,
            'liteList': [
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 1590,
            'pos': 758522,
            'headAt': 350,
            'liteList': [
              {
                'level': 1,
                'width': 1870,
                'id': 7368,
                'dest': [
                  32,
                  33,
                  36,
                  37,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  2,
                  3,
                  5,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 1730,
                'id': 7369,
                'dest': [
                  42,
                  43,
                  46,
                  47,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 1590,
            'pos': 694244,
            'headAt': 350,
            'liteList': [
              {
                'level': 1,
                'width': 1870,
                'id': 7370,
                'dest': [
                  32,
                  33,
                  36,
                  37,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  2,
                  3,
                  5,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 1730,
                'id': 7371,
                'dest': [
                  42,
                  43,
                  46,
                  47,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 2440,
            'pos': 595200,
            'headAt': 3291,
            'liteList': [
              {
                'level': 2,
                'width': 3600,
                'id': 7372,
                'dest': [
                  40,
                  30,
                  44,
                  34,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  2,
                  5,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 1590,
            'pos': 528973,
            'headAt': 327,
            'liteList': [
              {
                'level': 1,
                'width': 1870,
                'id': 7373,
                'dest': [
                  32,
                  33,
                  36,
                  37,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  2,
                  3,
                  5,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 1730,
                'id': 7374,
                'dest': [
                  42,
                  43,
                  46,
                  47,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 1590,
            'pos': 464386,
            'headAt': 3262,
            'liteList': [
              {
                'level': 1,
                'width': 1870,
                'id': 7375,
                'dest': [
                  32,
                  33,
                  36,
                  37,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  2,
                  3,
                  5,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 1730,
                'id': 7376,
                'dest': [
                  42,
                  43,
                  46,
                  47,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'length': 2440,
            'pos': 365464,
            'headAt': 324,
            'liteList': [
              {
                'level': 2,
                'width': 3600,
                'id': 7377,
                'dest': [40, 30, 44, 34, 0, 0, 0, 0, 0, 0, 2, 5, 0, 0, 0, 0]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
              },
              {
                'level': 0,
                'width': 0,
                'id': 0,
                'dest': [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0
                ]
              }
            ]
          }
        ]
      }, // 两分
      glassMoviePointDataTest: [],
      timing2: null,
      timing3: null, // 线控动画定时器参数
      timing4: null, // 动画定时器参数
      timing5: null, // 5s接口定时器参数
      allGlass: 2000, // piece
      runSpeed: 0.5, // 1.5
      // 跑片模式选择 仅主线 混用 仅支线
      animateMode: 'main', // main all branch
      glassMode: 1, // 2分板模式
      glass: {
        glass0: {
          id: 1,
          idMax: 4,
          route: '1#',
          route1: '2#', // 上片路径
          route1_stopSign: 0,
          route1_position: {
            front: 0,
            back: 0,
            up: 0,
            down: 0,
            turn: 0
          },
          route2: '1#', // 下片路径
          route2_stopSign: 0,
          route2_position: {
            front: 0,
            back: 0,
            up: 0,
            down: 0,
            turn: 0
          },
          width: 20,
          height: 35,
          color: 'blue',
          position: {
            front: 0,
            back: 0,
            up: 0,
            down: 0,
            turn: 0
          },
          stopSign: 0
        }
      },
      pathDrawShow: false, // 路径动画开关
      pointDrawShow: true,
      open: false,
      open1: false,
      title: '动画参数',
      title1: '设备详情',
      dropTip: '无落板', // 落板提示
      mainStackTip: // 主线堆垛提示
          [
            ['42', '+10', '42', '+2'], // 主线上侧堆垛1
            ['42', '+23', '42', '+21'], // 主线上侧堆垛2
            ['110', '0', '110', '+64'], // 主线上侧堆垛3
            ['110', '+56', '110', '0'], // 主线上侧堆垛4
            ['42', '+3', '42', '+41'], // 主线下侧堆垛1
            ['42', '+10', '42', '+33'], // 主线下侧堆垛2
            ['110', '+41', '110', '+1'], // 主线下侧堆垛3
            ['110', '+20', '110', '+1'] // 主线下侧堆垛4
          ],
      // image1src: require('@/assets/LONGHAO_A.png'),
      // image1src: require('@/assets/LONGHAO_A3.png'),
      // image1src: require('@/assets/LONGHAO_A6.png'),
      image1src: require('@/assets/LONGHAO_A7.png'),
      prepareImg: require('@/assets/prepare.png'),
      image2src: require('@/assets/LONGHAO_B.png'),
      image3src: require('@/assets/LONGHAO_C.png'),
      image4src: require('@/assets/LONGHAO_D.png'),
      imageBg: require('@/assets/bg.png'),
      imageBg1: require('@/assets/bg1.png'),
      dictData: [
        {
          label: '停机',
          value: 'STOP'
        },
        {
          label: '生产中',
          value: 'WORKING'
        }
      ],
      bgCanvasStyle: 0,
      titleBgStyle: 20,
      titleStyle: 675
    }
  },

  created() {
    // this.getList();
  },
  mounted() {
    // 流程 timeFn2() timeFn5() 测试后取消注释 todo
    // 初始化 读背景 拿宽高 画底图
    this.timeFn2()
    this.timeFn5()
    this.initDraw()
  },
  beforeDestroy() {
    // 线控数据计时器清空
    clearInterval(this.timing2)
    // 线控动画计时器清空
    clearInterval(this.timing3)
    // 堆垛接口和落板接口计时器清空
    clearInterval(this.timing5)
  },
  methods: {
    /** 查询设备列表 */
    // getList() {
    //   this.loading = true;
    //   listMachinery(this.queryParams).then(response => {
    //     this.machineryList = response.rows;
    //     this.loading = false;
    //     this.machineryDetail = this.machineryList[5]
    //   });
    // },

    // 接口清空
    allClear() {
      // 线控数据计时器清空
      clearInterval(this.timing2)
      // 线控动画计时器清空
      clearInterval(this.timing3)
      // 堆垛接口和落板接口计时器清空
      clearInterval(this.timing5)
      // 暂时无用
      cancelAnimationFrame(this.timing4)
    },

    // 动画测试接口
    getMovieData() {
      movieTest().then(response => {
        this.glassMoviePointData = response
        // console.log('testMovieData:', this.glassMoviePointData)
        // let result = this.glassMoviePointData.data.reduce(function (acc, cur) {
        //   // let found = acc.find(item => item.headAt);
        //   if (cur.headAt !== 0) {
        //     let liteList = cur.liteList.reduce(function (liteAcc, liteCur) {
        //       if (liteCur.id !== 0) {
        //         liteAcc.push({
        //           id: liteCur.id,
        //           width: liteCur.width,
        //           level: liteCur.level,
        //           dest: liteCur.dest,
        //         })
        //       }
        //       return liteAcc;
        //     }, []);
        //     acc.push({
        //       pos: cur.pos,
        //       length: cur.length,
        //       headAt: cur.headAt,
        //       liteList: liteList,
        //       glassNum: liteList.length,
        //       firstWidth: liteList[0].width
        //     })
        //     // console.log(acc,cur);
        //     // console.log(found,acc,cur);
        //   }
        //   return acc;
        // }, []);
        // console.log('[[result]]:', result)
        // console.log('[[result0]]:', result[0])
        // let list = [];
        // for (let i = 0; i < result.length; i++) {
        //   let screenPos = Math.ceil(result[i].pos / 1500) - 18 + 705;
        //   list.push(screenPos)
        // }
        // this.glassMoviePointDataTest = list;
        // console.log('[[testData]]:', this.glassMoviePointDataTest)
      })
    },
    // 落板信息映射
    dropInfoTrans(num) {
      let str = ''
      switch (num) {
        case 1:
          str = '琴键废板落板'
          break
        case 2:
          str = '手动落板'
          break
        case 3:
          str = '下游阻塞'
          break
        case 4:
          str = '弃板（自定义，非质检板、跳刀取样板流到气垫桌的板定义为弃板，流到终端破碎机）'
          break
        case 5:
          str = '完整性检测不合格的板（多缺角板）'
          break
        case 6:
          str = '堆垛位弃板'
          break
        case 7:
          str = '单切机的废板'
          break
        case 8:
          str = '小片落板'
          break
        case 9:
          str = '取样台取样'
          break
        case 10:
          str = '气垫桌子取样'
          break
        case 11:
          str = '清边'
          break
        case 12:
          str = '抽条'
          break
        case 0:
          str = '未知原因'
          break
      }
      return str
    },
    // 堆垛和落板接口
    getStockAndDropData() {
      wireMainline().then(response => {
        const resArrayData = response.rows
        const rD1 = resArrayData[0]
        const rD2 = resArrayData[1]
        const rD3 = resArrayData[2]
        const rD4 = resArrayData[3]
        const rD5 = resArrayData[4]
        const rD6 = resArrayData[5]
        const rD7 = resArrayData[6]
        const rD8 = resArrayData[7]
        this.mainStackTip[0] = [String(rD1.setLNum), '+' + String(rD1.stackedLNum), String(rD1.setRNum), '+' + String(rD1.stackedRNum)]
        this.mainStackTip[1] = [String(rD2.setLNum), '+' + String(rD2.stackedLNum), String(rD2.setRNum), '+' + String(rD2.stackedRNum)]
        this.mainStackTip[2] = [String(rD3.setLNum), '+' + String(rD3.stackedLNum), String(rD3.setRNum), '+' + String(rD3.stackedRNum)]
        this.mainStackTip[3] = [String(rD4.setLNum), '+' + String(rD4.stackedLNum), String(rD4.setRNum), '+' + String(rD4.stackedRNum)]
        this.mainStackTip[4] = [String(rD5.setLNum), '+' + String(rD5.stackedLNum), String(rD5.setRNum), '+' + String(rD5.stackedRNum)]
        this.mainStackTip[5] = [String(rD6.setLNum), '+' + String(rD6.stackedLNum), String(rD6.setRNum), '+' + String(rD6.stackedRNum)]
        this.mainStackTip[6] = [String(rD7.setLNum), '+' + String(rD7.stackedLNum), String(rD7.setRNum), '+' + String(rD7.stackedRNum)]
        this.mainStackTip[7] = [String(rD8.setLNum), '+' + String(rD8.stackedLNum), String(rD8.setRNum), '+' + String(rD8.stackedRNum)]
      })
      wireDrop().then(response => {
        const resReasonData = response.data
        if (resReasonData.dropReason1) {
          this.dropTip = '近期落板原因: ' + this.dropInfoTrans(resReasonData.dropReason1)
        } else if (resReasonData.dropReason2) {
          this.dropTip = '近期落板原因: ' + this.dropInfoTrans(resReasonData.dropReason2)
        } else if (resReasonData.dropReason3) {
          this.dropTip = '近期落板原因: ' + this.dropInfoTrans(resReasonData.dropReason3)
        } else if (resReasonData.dropReason4) {
          this.dropTip = '近期落板原因: ' + this.dropInfoTrans(resReasonData.dropReason4)
        }
      })
    },

    timeFn2() {
      this.timing2 = setInterval(() => {
        // this.getMovieData() // todo base
      }, 1000)
    },

    timeFn5() {
      this.timing5 = setInterval(() => {
        // this.getStockAndDropData()  // todo base
      }, 5000)
    },

    // 初始化
    initDraw() {
      const boardCanvas = this.$refs.board
      const ctx = boardCanvas.getContext('2d')
      const that = this
      const image = new Image()
      image.src = this.image1src
      image.onload = () => {
        that.bgWidth = Math.round(image.width / 6)
        that.bgHeight = Math.round(image.height / 6)
        boardCanvas.width = that.bgWidth
        boardCanvas.height = that.bgHeight
        console.log(that.bgWidth, that.bgHeight)
        // 间隔的毫秒,1秒
        setTimeout(function() {
          ctx.drawImage(image, 0, 0, that.bgWidth, that.bgHeight)
          // 交互都在pointDraw上
          that.pointDraw()
          that.pathDraw()
          that.glassSeaDraw()
          // that.glassIceDraw();
          that.glassMovieDraw()
          // that.dragTest();
          // that.customSetInterval((timer) => {
          //   cancelAnimationFrame(timer)
          // },1000)
          setTimeout(
            function() {
              // 动画准备 读序列 读路径 读节点 启动动画 循环判定
              // that.animateDraw();
            }, 1500)
        }, 1000)
      }
    },

    // 交互层
    pointDraw(show) {
      const pointCanvas = this.$refs.point
      const ctx = pointCanvas.getContext('2d')
      const that = this

      pointCanvas.width = that.bgWidth
      pointCanvas.height = that.bgHeight

      that.pointDrawShow = !that.pointDrawShow
      if (show === false) {
        ctx.clearRect(0, 0, that.bgWidth, that.bgHeight)
        return
      }
      // 绑定点击事件 注意该层应为所有canvas最上层 当前z-index 6
      // 点击事件块绘制 当前未绘制
      const clickBlockPrint = false
      if (clickBlockPrint === true) {
        ctx.save()
        ctx.strokeStyle = 'rgba(0,238,12,0.6)'
        ctx.lineWidth = 4
        ctx.fillStyle = 'rgba(0,238,12,0.4)'
        ctx.beginPath()
        // 横切
        ctx.lineJoin = 'round'
        ctx.lineWidth = 5
        ctx.strokeStyle = 'rgba(0,238,12,0.6)'
        // strokeRect x y w h(x y 左上角)
        ctx.strokeRect(360, 360, 440 - 360, 435 - 360)
        // ctx.rect(360,360,440-360,435-360);
        // ctx.fill();
        // 支转
        // ctx.fillStyle='rgba(0,238,12,0.4)';
        ctx.beginPath()
        ctx.strokeRect(890, 360, 1085 - 885, 435 - 360)
        // 堆垛 支线上侧
        ctx.beginPath()
        ctx.strokeRect(890, 0, 200, 100)
        // ctx.arc(1115, 25, 15, 0, Math.PI * 2, true);
        // ctx.fill();

        // 堆垛 支线中侧
        ctx.beginPath()
        ctx.strokeRect(740, 155, 120, 85)
        ctx.beginPath()
        ctx.strokeRect(1125, 155, 120, 85)
        // 堆垛 主线末端
        // 下1
        ctx.beginPath()
        ctx.strokeRect(1207 - 45, 465 - 42, 120 - 30, 85 - 30)
        // 下2
        ctx.strokeRect(1333 - 45, 465 - 42, 120 - 30, 85 - 30)
        // 下3
        ctx.strokeRect(1440 - 45, 465 - 42, 120 - 30, 85 - 30)
        // 下4
        ctx.strokeRect(1553 - 45, 465 - 42, 120 - 30, 85 - 30)
        // 上1
        ctx.strokeRect(1276 - 45, 310 + 5, 120 - 30, 85 - 30)
        // 上2
        ctx.strokeRect(1383 - 45, 310 + 5, 120 - 30, 85 - 30)
        // 上3
        ctx.strokeRect(1498 - 45, 310 + 5, 120 - 30, 85 - 30)
        // 上4
        ctx.strokeRect(1602 - 45, 310 + 5, 120 - 30, 85 - 30)

        ctx.restore()
      }
      // 单按钮事件块
      // 堆垛 主线上侧1
      ctx.save()
      // ctx.strokeStyle = 'rgba(0,238,12,0.6)';
      ctx.fillStyle = 'rgba(0,238,12,0.6)'
      ctx.beginPath()
      // ctx.strokeRect(1276 - 45, 310 + 5, 120 - 30, 85 - 30);
      // 1069 342 左上角
      ctx.rect(1070, 340, 30, 20)
      ctx.fill()
      ctx.restore()
      // =================== 分割线 =========================
      // 判断是否在框内 目前仅测试支线上侧 890,0,200,100 x y w h rects([x1,y1,x2,y2])
      // 当前框架交互适用的点击位置[e.offset]
      const ifInRect = (pos, rects) => {
        if (pos.x >= rects[0] && pos.x <= rects[2] && pos.y <= rects[3] && pos.y >= rects[1]) {
          return true
        }
        return false
      }
      pointCanvas.addEventListener('click', (e) => {
        const offset = pointCanvas.getBoundingClientRect()
        const x = Math.round(e.clientX - offset.left)
        const y = Math.round(e.clientY - offset.top)
        // console.log(x, y, "点击位置");
        // 交互点相对位置换算问题
        // 1920 1080 最大化 1652 483 (890 2 - 1089 101)
        // 1920 1080 最大化 1652 483 (993 468 - 1191 560) e.clint
        // 1680 1050 最大化 1652 483 (891 1 - 1088 101)
        // 1680 1050 最大化 1652 483 (995 475 - 1190 569) e.clint
        // 1920 1080 非最大化 1652 483 (494 2 - 605 54)
        // 1920 1080 非最大化 1652 483 (551 307 - 662 359) e.clint
        // 1680 1050 非最大化 1652 483 (566 2 - 695 62)
        // 1680 1050 非最大化 1652 483 (631 416 - 757 476) e.clint
        // console.log(e.clientX, e.clientY, "点击位置e.client");
        console.log(e.offsetX, e.offsetY, '点击位置e.offset')
        const pos = {
          x: e.offsetX,
          y: e.offsetY
        }

        // 【0】90转位置 X 925-980 Y 265-315
        // 【1】掰边位置 X 540-625 Y 360-435
        // 【2】堆垛位置 X 540-625 Y 360-435？？
        // 【3】横切位置 X 540-625 Y 360-435？？
        // 【4】支转位置 X 890-1055 Y 360-435
        // 【5】纵切位置 X 360-440 Y 360-435
        // 【6】纵掰位置 X 630-725 Y 360-435

        switch (!show) {
          // 开启新动画模式 主线下侧堆垛
          case ifInRect(pos, [1165, 420, 1165 + 420, 420 + 55]):
            console.log('开启新动画模式')
            that.glassMovieDraw()
            // that.glassIceDraw();
            break
            // 新动画接口 主线上侧堆垛
          case ifInRect(pos, [1230, 315, 1230 + 420, 315 + 55]):
            console.log('新动画接口')
            that.timeFn2()
            break
            // 单按钮事件块 堆垛 主线上侧1 (1070, 340, 30, 20)
          case ifInRect(pos, [1070, 340, 1070 + 30, 340 + 20]):
            // dialog
            that.open = true
            break
            // 新动画接口关闭 支线上侧堆垛
          case ifInRect(pos, [890, 0, 890 + 200, 0 + 100]):
            console.log('新动画接口关闭')
            clearInterval(that.timing2) // 线控数据定时器清空
            clearInterval(that.timing3) // 线控动画定时器清空
            clearInterval(that.timing5) // 堆垛接口和落板接口定时器清空
            // 暂时无用
            cancelAnimationFrame(that.timing4)
            break
            // 重启模式 玻璃带
          case ifInRect(pos, [0, 380, 705, 415]):
            console.log('重启模式')
            console.log('pointDrawShow', that.pointDrawShow)
            if (that.glassMode === 1) {
              that.glassMode = 2
            } else {
              that.glassMode = 1
            }
            console.log('1、2分板切换,当前为' + that.glassMode + '分板')
            that.animateDraw()
            break
          case (x >= 360 && x < 440 && y <= 435 && y >= 360):
            console.log('纵切机位置')
            // that.machineryDetail = that.machineryList[5];
            // that.open = true;
            break
          case (x >= 540 && x < 625 && y <= 435 && y >= 360):
            console.log('掰边位置')
            // that.machineryDetail = that.machineryList[1];
            // that.open = true;
            break
          case (x >= 890 && x < 1055 && y <= 435 && y >= 360):
            console.log('支转位置')
            // that.machineryDetail = that.machineryList[4];
            // that.open = true;
            break
          case (x >= 630 && x < 725 && y <= 435 && y >= 360):
            console.log('纵掰位置')
            // that.machineryDetail = that.machineryList[6];
            // that.open = true;
            break
          case (x >= 925 && x < 980 && y <= 315 && y >= 265):
            console.log('90转位置')
            // that.machineryDetail = that.machineryList[0];
            // that.open = true;
            break
        }
      }, false)
    },

    // 路径层 暂不用
    pathDraw() {
      const pathCanvas = this.$refs.path
      const ctx = pathCanvas.getContext('2d')
      const that = this

      pathCanvas.width = that.bgWidth
      pathCanvas.height = that.bgHeight

      const x0 = that.canvasPoint.x0
      const x1 = that.canvasPoint.x1
      const x2 = that.canvasPoint.x2
      const x3 = that.canvasPoint.x3
      const x4 = that.canvasPoint.x4
      const x5 = that.canvasPoint.x5
      const x6 = that.canvasPoint.x6

      const y0 = that.canvasPoint.y0
      const y1 = that.canvasPoint.y1
      const y2 = that.canvasPoint.y2
      const y3 = that.canvasPoint.y3
      const y4 = that.canvasPoint.y4

      const show = that.pathDrawShow
      // that.pathDrawShow = !that.pathDrawShow;
      if (show === false) {
        ctx.clearRect(0, 0, that.bgWidth, that.bgHeight)
        return
      }

      ctx.save()
      // 堆垛 主线末端
      // 下1
      // ctx.beginPath();
      // ctx.rect(1207-45,465-42,120-30,85-30);
      // // 下2
      // ctx.rect(1333-45,465-42,120-30,85-30);
      // // 下3
      // ctx.rect(1440-45,465-42,120-30,85-30);
      // // 下4
      // ctx.rect(1553-45,465-42,120-30,85-30);
      // // 上1
      // ctx.rect(1276-45,310+5,120-30,85-30);
      // // 上2
      // ctx.rect(1383-45,310+5,120-30,85-30);
      // // 上3
      // ctx.rect(1498-45,310+5,120-30,85-30);
      // // 上4
      // ctx.rect(1602-45,310+5,120-30,85-30);
      // ctx.fill();

      // 大机械手路径点
      const yy0 = that.canvasPoint2.yy0
      const m1x = that.canvasPoint2.m1x
      const m1y = that.canvasPoint2.m1y
      const m2x = that.canvasPoint2.m2x
      const m2y = that.canvasPoint2.m2y
      const m3x = that.canvasPoint2.m3x
      const m3y = that.canvasPoint2.m3y
      const m4x = that.canvasPoint2.m4x
      const m4y = that.canvasPoint2.m4y

      // 小机械手路径点
      // let yy0 = 399;
      // let m1x = 1207;
      // let m1y = 423+27;
      // let m2x = 1383;
      // let m2y = 372-27;
      // let m3x = 1440;
      // let m3y = m1y;
      // let m4x = 1602;
      // let m4y = m2y;

      ctx.beginPath()
      ctx.lineWidth = 5
      ctx.strokeStyle = 'pink'
      // 路径起点 玻璃带终点
      const st0 = that.glassSeaEndPoint.x + that.glassSeaEndPoint.w
      ctx.moveTo(st0, y0)
      ctx.lineTo(m1x, y0)
      ctx.lineTo(m1x, m1y)
      ctx.stroke()
      ctx.moveTo(st0, y0)
      ctx.lineTo(m2x, y0)
      ctx.lineTo(m2x, m2y)
      ctx.stroke()
      ctx.moveTo(st0, y0)
      ctx.lineTo(m3x, y0)
      ctx.lineTo(m3x, m3y)
      ctx.stroke()
      ctx.moveTo(st0, y0)
      ctx.lineTo(m4x, y0)
      ctx.lineTo(m4x, m4y)
      ctx.stroke()

      ctx.beginPath()
      ctx.lineWidth = 5
      ctx.stroke()

      // ctx.beginPath();
      // ctx.strokeStyle="blue";
      // ctx.moveTo(x0,y0);
      // ctx.lineTo(x1,y0);
      // ctx.lineTo(x1,y1);
      // ctx.lineTo(x2,y1);
      // ctx.stroke();
      //
      // ctx.beginPath();
      // ctx.strokeStyle="green";
      // ctx.moveTo(x1,y1);
      // ctx.lineTo(x1,y2);
      // ctx.stroke();
      //
      // ctx.beginPath();
      // ctx.strokeStyle="red";
      // ctx.moveTo(x1,y0);
      // ctx.lineTo(x3,y0);
      // ctx.lineTo(x3,y2);
      // ctx.stroke();
      //
      // ctx.beginPath();
      // ctx.strokeStyle="orange";
      // ctx.moveTo(x3,y1);
      // ctx.lineTo(x4,y1);
      // ctx.stroke();
      //
      // ctx.beginPath();
      // ctx.strokeStyle='#df6000';
      // ctx.moveTo(x3,y0);
      // ctx.lineTo(x5,y0);
      // ctx.stroke();

      ctx.restore()
    },

    // 玻璃带层
    glassSeaDraw() {
      const pathCanvas = this.$refs.glassSea
      const ctx = pathCanvas.getContext('2d')
      const that = this

      pathCanvas.width = that.bgWidth
      pathCanvas.height = that.bgHeight

      ctx.save()
      // 玻璃带
      const xx = that.glassWidth
      const yy = that.glassHeight
      ctx.fillStyle = 'rgba(0,255,255,0.6)'
      // ctx.fillStyle = 'rgba(0,255,255,0.9)';
      const bx = that.glassSeaEndPoint.x // 1640
      const by = that.glassSeaEndPoint.y + yy / 2 // 399
      const bw = that.glassSeaEndPoint.w
      const bh = yy
      ctx.beginPath()
      ctx.rect(bx, by, bw, bh)
      ctx.fill()
      ctx.stroke()
      ctx.restore()
    },

    // 玻璃片动画层
    animateDraw() {
      const glassCanvas = this.$refs.glassPiece
      const ctx = glassCanvas.getContext('2d')
      const that = this

      const bgWidth = that.bgWidth
      const bgHeight = that.bgHeight

      glassCanvas.width = that.bgWidth
      glassCanvas.height = that.bgHeight

      // 默认一分板
      const xx = that.glassWidth
      const yy = that.glassHeight

      const x0 = that.canvasPoint.x0
      const x1 = that.canvasPoint.x1 - xx / 2
      const x2 = that.canvasPoint.x2 - xx / 2
      const x3 = that.canvasPoint.x3 - xx / 2
      const x4 = that.canvasPoint.x4 - xx / 2
      const x5 = that.canvasPoint.x5 - xx / 2
      const x6 = that.canvasPoint.x6

      const y0 = that.canvasPoint.y0 - yy / 2
      const y1 = that.canvasPoint.y1 - yy / 2
      const y2 = that.canvasPoint.y2 - yy / 2
      const y3 = that.canvasPoint.y3
      const y4 = that.canvasPoint.y4

      // 大机械手路径点
      const yy0 = that.canvasPoint2.yy0
      const m1x = that.canvasPoint2.m1x - 11
      const m1y = that.canvasPoint2.m1y - 14
      const m2x = that.canvasPoint2.m2x - 11
      const m2y = that.canvasPoint2.m2y - 14
      const m3x = that.canvasPoint2.m3x - 11
      const m3y = that.canvasPoint2.m3y - 14
      const m4x = that.canvasPoint2.m4x - 11
      const m4y = that.canvasPoint2.m4y - 14

      const startPoint = 0
      const runSpeed = that.runSpeed

      ctx.save()
      ctx.fillStyle = 'blue'
      ctx.beginPath()
      ctx.rect(500, y0, xx, yy)
      ctx.fill()

      const b = that.glassSpeedScale
      const x = runSpeed / b

      let timer = 0
      const glass = that.glass.glass0
      // todo idMax逻辑需修改
      glass.idMax = (that.animateMode === 'all') ? 5 : 4
      const glassOrder = []
      const glassList = []
      // order路径初始化
      for (let i = 0; i < glass.idMax; i++) {
        glass.id = i + 1
        // 加入2分板初始化序列
        if (that.glassMode === 2) {
          if (glass.idMax === 4) {
            glass.route = (glass.id % 2 === 0) ? '2#' : '1#'
            glass.route1 = (glass.id % 2 === 0) ? '4#' : '2#'
            glass.route2 = (glass.id % 2 === 0) ? '3#' : '1#'
          }
        } else {
          glass.route = String(i + 1) + '#'
        }
        const alphaValue = 0.4
        glass.color = ['rgba(0,255,255,' + alphaValue + ')', 'rgba(0,255,255,' + alphaValue + ')', 'rgba(0,255,255,' + alphaValue + ')', 'rgba(0,255,255,' + alphaValue + ')', 'rgba(0,255,255,' + alphaValue + ')'][i]
        glass.position.up = y0
        // 深拷贝
        glassOrder.push(JSON.parse(JSON.stringify(glass)))
      }
      console.log('初始化了1次')
      let lastGlass = {}
      lastGlass = JSON.parse(JSON.stringify(glassOrder[0]))
      glassList.push(JSON.parse(JSON.stringify(glassOrder[0])))

      // glassList lastGlass 初始化
      const st0 = that.glassSeaEndPoint.x + that.glassSeaEndPoint.w - xx

      glassList[0].position.front = st0
      glassList[0].position.back = glassList[0].position.front - glassList[0].width
      glassList[0].position.up = y0
      glassList[0].position.down = glassList[0].position.up - glassList[0].height

      lastGlass.position.back = glassList[0].position.back
      lastGlass.position.front = glassList[0].position.front

      const firstGlassPosition = {
        front: glassList[0].position.front,
        back: 0
      }
      cancelAnimationFrame(timer)
      timer = requestAnimationFrame(function fn() {
        ctx.clearRect(0, 0, bgWidth, bgHeight)
        let lastLength = that.startGap + lastGlass.width
        switch (that.animateMode) {
          case 'main':
            // console.log("仅主线");
            // 集体前进 定位 判断转向属性 转向主逻辑
            for (let i = 0; i < glassList.length; i++) {
              switch (glassList[i].route) {
                case '1#':
                  // 2分板逻辑 先分离下片 主片为下片
                  if (that.glassMode === 2) {
                    // 向右前进类 主片基本定位
                    if (glassList[i].position.back < m1x && glassList[i].position.turn === 0) {
                      glassList[i].position.back = glassList[i].position.back + x
                      glassList[i].route2_position.back = glassList[i].position.back
                      glassList[i].route1_position.back = glassList[i].position.back
                      glassList[i].route2_position.up = glassList[i].position.up
                      glassList[i].route1_position.up = glassList[i].position.up
                    }
                    // 上板向右前进类 主片继续前进 需写在主turn之前
                    if (glassList[i].position.back >= m1x && glassList[i].position.turn === 1) {
                      glassList[i].route1_position.back = glassList[i].route1_position.back + x
                    }
                    // 下板向下前进类
                    if (glassList[i].route2_position.back >= m1x && (glassList[i].route2_position.turn === 0 || glassList[i].route2_position.turn === 1)) {
                      glassList[i].route2_position.turn = 1
                      glassList[i].position.turn = 1
                      glassList[i].route2_position.up = glassList[i].route2_position.up + x
                    }

                    // 上板向上前进类
                    if (glassList[i].route1_position.back >= m2x && (glassList[i].route1_position.turn === 0 || glassList[i].route1_position.turn === 1)) {
                      glassList[i].position.turn = 2
                      glassList[i].route1_position.turn = 1
                      glassList[i].route1_position.up = glassList[i].route1_position.up - x
                    }
                    // 预测线等传递用数据更新
                    glassList[i].position.front = glassList[i].position.back + glassList[i].width
                    glassList[i].route1_position.front = glassList[i].route1_position.back + glassList[i].width
                    glassList[i].route2_position.front = glassList[i].route2_position.back + glassList[i].width
                    // 下片预判 下板向下前进类
                    if (glassList[i].route2_position.up > m1y && glassList[i].route2_position.turn === 1) {
                      glassList[i].route2_stopSign = 1
                    }// 下片预判 上板向上前进类
                    if (glassList[i].route1_position.up < m2y && glassList[i].route1_position.turn === 1) {
                      glassList[i].route1_stopSign = 1
                    }
                  } else {
                    // 1分板逻辑
                    // 向右前进类
                    if (glassList[i].position.back < m1x && glassList[i].position.turn === 0) {
                      glassList[i].position.back = glassList[i].position.back + x
                    }
                    // 向下前进类
                    if (glassList[i].position.back >= m1x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
                      glassList[i].position.turn = 1
                      glassList[i].position.up = glassList[i].position.up + x
                    }
                    glassList[i].position.front = glassList[i].position.back + glassList[i].width

                    // 下片预判 向下前进类
                    if (glassList[i].position.up > m1y && glassList[i].position.turn === 1) {
                      glassList[i].stopSign = 1
                    }
                  }
                  break
                case '2#':
                  if (that.glassMode === 2) {
                    // 向右前进类 主片基本定位
                    if (glassList[i].position.back < m3x && glassList[i].position.turn === 0) {
                      glassList[i].position.back = glassList[i].position.back + x
                      glassList[i].route2_position.back = glassList[i].position.back
                      glassList[i].route1_position.back = glassList[i].position.back
                      glassList[i].route2_position.up = glassList[i].position.up
                      glassList[i].route1_position.up = glassList[i].position.up
                    }
                    // 上板向右前进类 主片继续前进 需写在主turn之前
                    if (glassList[i].position.back >= m3x && glassList[i].position.turn === 1) {
                      glassList[i].route1_position.back = glassList[i].route1_position.back + x
                    }
                    // 下板向下前进类
                    if (glassList[i].route2_position.back >= m3x && (glassList[i].route2_position.turn === 0 || glassList[i].route2_position.turn === 1)) {
                      glassList[i].route2_position.turn = 1
                      glassList[i].position.turn = 1
                      glassList[i].route2_position.up = glassList[i].route2_position.up + x
                    }

                    // 上板向上前进类
                    if (glassList[i].route1_position.back >= m4x && (glassList[i].route1_position.turn === 0 || glassList[i].route1_position.turn === 1)) {
                      glassList[i].position.turn = 2
                      glassList[i].route1_position.turn = 1
                      glassList[i].route1_position.up = glassList[i].route1_position.up - x
                    }
                    // 预测线等传递用数据更新
                    glassList[i].position.front = glassList[i].position.back + glassList[i].width
                    glassList[i].route1_position.front = glassList[i].route1_position.back + glassList[i].width
                    glassList[i].route2_position.front = glassList[i].route2_position.back + glassList[i].width
                    // 下片预判 下板向下前进类
                    if (glassList[i].route2_position.up > m3y && glassList[i].route2_position.turn === 1) {
                      glassList[i].route2_stopSign = 1
                    }// 下片预判 上板向上前进类
                    if (glassList[i].route1_position.up < m4y && glassList[i].route1_position.turn === 1) {
                      glassList[i].route1_stopSign = 1
                    }
                  } else {
                    // 向右前进类
                    if (glassList[i].position.back < m2x && glassList[i].position.turn === 0) {
                      glassList[i].position.back = glassList[i].position.back + x
                    }
                    // 向上前进类
                    if (glassList[i].position.back >= m2x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
                      glassList[i].position.turn = 1
                      glassList[i].position.up = glassList[i].position.up - x
                    }
                    glassList[i].position.front = glassList[i].position.back + glassList[i].width

                    // 下片预判 向上前进类
                    if (glassList[i].position.up < m2y && glassList[i].position.turn === 1) {
                      glassList[i].stopSign = 1
                    }
                  }
                  break
                case '3#':
                  // 向右前进类
                  if (glassList[i].position.back < m3x && glassList[i].position.turn === 0) {
                    glassList[i].position.back = glassList[i].position.back + x
                  }
                  // 向下前进类
                  if (glassList[i].position.back >= m3x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
                    glassList[i].position.turn = 1
                    glassList[i].position.up = glassList[i].position.up + x
                  }
                  glassList[i].position.front = glassList[i].position.back + glassList[i].width

                  // 下片预判 向下前进类
                  if (glassList[i].position.up > m3y && glassList[i].position.turn === 1) {
                    glassList[i].stopSign = 1
                  }
                  break
                case '4#':
                  // 向右前进类
                  if (glassList[i].position.back < m4x && glassList[i].position.turn === 0) {
                    glassList[i].position.back = glassList[i].position.back + x
                  }
                  // 向上前进类
                  if (glassList[i].position.back >= m4x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
                    glassList[i].position.turn = 1
                    glassList[i].position.up = glassList[i].position.up - x
                  }
                  glassList[i].position.front = glassList[i].position.back + glassList[i].width

                  // 下片预判 向上前进类
                  if (glassList[i].position.up < m4y && glassList[i].position.turn === 1) {
                    glassList[i].stopSign = 1
                  }
                  break
              }
            }

            // 预判线赋值
            firstGlassPosition.front = glassList[glassList.length - 1].position.front
            firstGlassPosition.back = firstGlassPosition.front - lastGlass.width

            // 根据预判线判断是否产生新片
            lastLength = that.startGap + lastGlass.width
            if (firstGlassPosition.front >= lastLength) {
              // 预判线回退
              firstGlassPosition.front -= lastLength

              if (lastGlass.id >= lastGlass.idMax) {
                // console.log("last赋值前 lastGlass",lastGlass,"glassList",glassList);
                lastGlass = JSON.parse(JSON.stringify(glassOrder[0]))
              } else {
                lastGlass = JSON.parse(JSON.stringify(glassOrder[lastGlass.id]))
              }
              // 最末片前后端赋值
              lastGlass.position.front = firstGlassPosition.front
              lastGlass.position.back = lastGlass.position.front - lastGlass.width
              glassList.push(JSON.parse(JSON.stringify(lastGlass)))
            } else {
              // 最末片前端赋值
              lastGlass.position.front = firstGlassPosition.front
              lastGlass.position.back = lastGlass.position.front - lastGlass.width
            }

            // 预判下片队列影响

            // 定位绘制 小于玻璃带不绘制
            // 加入2分板定位绘制
            if (that.glassMode === 2) {
              for (let i = 0; i < glassList.length; i++) {
                if (glassList[i].position.front > 0) {
                  switch (glassList[i].route) {
                    case '1#':
                    case '2#':
                      if (glassList[i].route1_stopSign === 1 && glassList[i].route2_stopSign === 1) {
                        // 停片不绘制
                        ctx.beginPath()
                        ctx.closePath()
                      } else if (glassList[i].position.back < st0) {
                        // 小于玻璃带不绘制
                        ctx.beginPath()
                        ctx.closePath()
                      } else {
                        ctx.fillStyle = glassList[i].color
                        // 上半
                        if (glassList[i].route1_stopSign === 1) {
                          ctx.beginPath()
                          ctx.closePath()
                        } else {
                          ctx.beginPath()
                          ctx.rect(glassList[i].route1_position.back, glassList[i].route1_position.up - 1, glassList[i].width, glassList[i].height / 2)
                          ctx.closePath()
                          ctx.fill()
                        }
                        // 下半
                        if (glassList[i].route2_stopSign === 1) {
                          ctx.beginPath()
                          ctx.closePath()
                        } else {
                          ctx.beginPath()
                          ctx.rect(glassList[i].route2_position.back, glassList[i].route2_position.up + glassList[i].height / 2 + 1, glassList[i].width, glassList[i].height / 2)
                          ctx.closePath()
                          ctx.fill()
                        }
                      }
                      break
                      // 废弃待定
                    case '5#':
                      if (glassList[i].stopSign === 1) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else if (glassList[i].position.back < st0) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else {
                        ctx.fillStyle = glassList[i].color
                        ctx.beginPath()
                        ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                        ctx.closePath()
                        ctx.fill()
                      }
                      break
                    case '3#':
                      if (glassList[i].stopSign === 1) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else if (glassList[i].position.back < st0) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else {
                        ctx.fillStyle = glassList[i].color
                        ctx.beginPath()
                        ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                        ctx.closePath()
                        ctx.fill()
                      }
                      break
                    case '4#':
                      if (glassList[i].stopSign === 1) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else if (glassList[i].position.back < st0) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else {
                        ctx.fillStyle = glassList[i].color
                        ctx.beginPath()
                        ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                        ctx.closePath()
                        ctx.fill()
                      }
                      break
                  }
                }
              }
            } else {
              // 1分板基本逻辑
              for (let i = 0; i < glassList.length; i++) {
                if (glassList[i].position.front > 0) {
                  switch (glassList[i].route) {
                    case '1#':
                      if (glassList[i].stopSign === 1) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else if (glassList[i].position.back < st0) {
                        // 小于玻璃带不绘制
                        ctx.beginPath()
                        ctx.closePath()
                      } else {
                        ctx.fillStyle = glassList[i].color
                        ctx.beginPath()
                        ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                        ctx.closePath()
                        ctx.fill()
                      }
                      break
                    case '2#':
                      if (glassList[i].stopSign === 1) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else if (glassList[i].position.back < st0) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else {
                        ctx.fillStyle = glassList[i].color
                        ctx.beginPath()
                        ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                        ctx.closePath()
                        ctx.fill()
                      }
                      break
                    case '3#':
                      if (glassList[i].stopSign === 1) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else if (glassList[i].position.back < st0) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else {
                        ctx.fillStyle = glassList[i].color
                        ctx.beginPath()
                        ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                        ctx.closePath()
                        ctx.fill()
                      }
                      break
                    case '4#':
                      if (glassList[i].stopSign === 1) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else if (glassList[i].position.back < st0) {
                        ctx.beginPath()
                        ctx.closePath()
                      } else {
                        ctx.fillStyle = glassList[i].color
                        ctx.beginPath()
                        ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                        ctx.closePath()
                        ctx.fill()
                      }
                      break
                  }
                }
              }
            }
            // 停线逻辑
            if (glassList.length < that.allGlass) {
              const downGlass = glassList.filter(glass => glass.stopSign === 1)
              that.nowGlass = glassList.length - downGlass.length
              that.pastGlass = glassList.length
              // console.log("!!!!!!!!!",glassList.length);
              timer = requestAnimationFrame(fn)
            } else {
              // console.log(glassList);
              cancelAnimationFrame(timer)
              setTimeout(() => {
                that.animateDraw()
              }, 2000)
            }
            break
          case 'all':
            console.log('混用')
            // 集体前进 定位 判断转向属性
            for (let i = 0; i < glassList.length; i++) {
              switch (glassList[i].route) {
                case '1#':
                  if (glassList[i].position.back < x1 && glassList[i].position.turn === 0) {
                    glassList[i].position.back = glassList[i].position.back + x
                  }
                  if (glassList[i].position.up < y1 && (glassList[i].position.turn === 1 || glassList[i].position.turn === 2)) {
                    glassList[i].position.turn = 2
                    glassList[i].position.back = glassList[i].position.back - x
                  }
                  if (glassList[i].position.back >= x1 && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
                    glassList[i].position.turn = 1
                    glassList[i].position.up = glassList[i].position.up - x
                  }
                  glassList[i].position.front = glassList[i].position.back + glassList[i].width

                  // 下片预判
                  if (glassList[i].position.back < x2 && glassList[i].position.turn === 2) {
                    glassList[i].stopSign = 1
                  }
                  break
                case '2#':
                  if (glassList[i].position.back < x1 && glassList[i].position.turn === 0) {
                    glassList[i].position.back = glassList[i].position.back + x
                  }
                  if (glassList[i].position.back >= x1 && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
                    glassList[i].position.turn = 1
                    glassList[i].position.up = glassList[i].position.up - x
                  }
                  glassList[i].position.front = glassList[i].position.back + glassList[i].width

                  // 下片预判
                  if (glassList[i].position.up < y2 && glassList[i].position.turn === 1) {
                    glassList[i].stopSign = 1
                  }
                  break
                case '3#':
                  glassList[i].position.back = glassList[i].position.back + x
                  glassList[i].position.front = glassList[i].position.back + glassList[i].width

                  // 下片预判
                  if (glassList[i].position.back >= x5) {
                    glassList[i].stopSign = 1
                  }
                  break
                case '4#':
                  if (glassList[i].position.back < x3 && glassList[i].position.turn === 0) {
                    glassList[i].position.back = glassList[i].position.back + x
                  }
                  if (glassList[i].position.back >= x3 && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
                    glassList[i].position.turn = 1
                    glassList[i].position.up = glassList[i].position.up - x
                  }
                  glassList[i].position.front = glassList[i].position.back + glassList[i].width

                  // 下片预判
                  if (glassList[i].position.up < y2 && glassList[i].position.turn === 1) {
                    glassList[i].stopSign = 1
                  }
                  break
                case '5#':
                  if (glassList[i].position.back < x3 && glassList[i].position.turn === 0) {
                    glassList[i].position.back = glassList[i].position.back + x
                  }
                  if (glassList[i].position.up < y1 && (glassList[i].position.turn === 1 || glassList[i].position.turn === 2)) {
                    glassList[i].position.turn = 2
                    glassList[i].position.back = glassList[i].position.back + x
                  }
                  if (glassList[i].position.back >= x3 && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
                    glassList[i].position.turn = 1
                    glassList[i].position.up = glassList[i].position.up - x
                  }
                  glassList[i].position.front = glassList[i].position.back + glassList[i].width

                  // 下片预判
                  if (glassList[i].position.back > x4 && glassList[i].position.turn === 2) {
                    glassList[i].stopSign = 1
                  }
                  break
              }
              console.log('第', i + 1, '片位置:')
              console.log('front', glassList[i].position.front, 'back', glassList[i].position.back)
            }

            // 预判线赋值
            firstGlassPosition.front = glassList[glassList.length - 1].position.front
            firstGlassPosition.back = firstGlassPosition.front - lastGlass.width

            // 根据预判线判断是否产生新片
            lastLength = that.startGap + lastGlass.width
            if (firstGlassPosition.front >= lastLength) {
              console.log('预判线回退')
              // 预判线回退
              firstGlassPosition.front -= lastLength

              if (lastGlass.id >= lastGlass.idMax) {
                // console.log("last赋值前 lastGlass",lastGlass,"glassList",glassList);
                lastGlass = JSON.parse(JSON.stringify(glassOrder[0]))
              } else {
                lastGlass = JSON.parse(JSON.stringify(glassOrder[lastGlass.id]))
              }
              // 最末片前后端赋值
              // console.log("last赋值前 glassList",glassList[0].position.front,"lastGlass",lastGlass.position);
              lastGlass.position.front = firstGlassPosition.front
              // console.log("last赋值后 glassList",glassList[0].position.front,"lastGlass",lastGlass.position);
              lastGlass.position.back = lastGlass.position.front - lastGlass.width
              glassList.push(JSON.parse(JSON.stringify(lastGlass)))
            } else {
              // 最末片前端赋值
              lastGlass.position.front = firstGlassPosition.front
              lastGlass.position.back = lastGlass.position.front - lastGlass.width
            }

            // 预判下片队列影响

            // 定位绘制
            for (let i = 0; i < glassList.length; i++) {
              if (glassList[i].position.front > 0) {
                switch (glassList[i].route) {
                  case '1#':
                    if (glassList[i].stopSign === 1) {
                      console.log('第', i + 1, '片, stop1')
                    } else {
                      ctx.fillStyle = glassList[i].color
                      ctx.beginPath()
                      ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                      // ctx.rect(glassList[i].position.back < 0 ? 0 : glassList[i].position.back, glassList[i].position.up, 20, 35);
                      ctx.closePath()
                      ctx.fill()
                    }
                    break
                  case '2#':
                    if (glassList[i].stopSign === 1) {
                      console.log('第', i + 1, '片, stop2')
                    } else {
                      ctx.fillStyle = glassList[i].color
                      ctx.beginPath()
                      ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                      ctx.closePath()
                      ctx.fill()
                    }
                    break
                  case '3#':
                    if (glassList[i].stopSign === 1) {
                      console.log('第', i + 1, '片, stop3')
                    } else {
                      ctx.fillStyle = glassList[i].color
                      ctx.beginPath()
                      ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                      ctx.closePath()
                      ctx.fill()
                    }
                    break
                  case '4#':
                    if (glassList[i].stopSign === 1) {
                      console.log('第', i + 1, '片, stop4')
                    } else {
                      ctx.fillStyle = glassList[i].color
                      ctx.beginPath()
                      ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                      ctx.closePath()
                      ctx.fill()
                    }
                    break
                  case '5#':
                    if (glassList[i].stopSign === 1) {
                      console.log('第', i + 1, '片, stop5')
                    } else {
                      ctx.fillStyle = glassList[i].color
                      ctx.beginPath()
                      ctx.rect(glassList[i].position.back, glassList[i].position.up, glassList[i].width, glassList[i].height)
                      ctx.closePath()
                      ctx.fill()
                    }
                    break
                }
              }
            }
            // 停片逻辑
            if (glassList.length >= 25) {
              console.log(glassList[24])
            }
            if (glassList.length < that.allGlass) {
              console.log(glassList)
              const downGlass = glassList.filter(
                glass => glass.stopSign === 1)
              that.nowGlass = glassList.length - downGlass.length
              that.pastGlass = glassList.length
              // console.log("stopSign off 当前glassList长度",glassList.length);
              // console.log("当前downGlass长度",downGlass.length,downGlass);
              timer = requestAnimationFrame(fn)
            } else {
              // let downGlass = glassList.filter(
              //   glass => glass.stopSign === 1)
              // that.nowGlass = glassList.length - downGlass.length
              // that.pastGlass = glassList.length
              // console.log(timer,"glassList", glassList, glassList.length,downGlass.length);
              console.log(timer, 'glassList', glassList, glassList.length)
              cancelAnimationFrame(timer)
            }

            break
          case 'branch':
            console.log('仅支线')
            break
        }
        // that.animateDraw;
      })
    },

    // 玻璃定格动画层 未启用
    glassIceDraw() {
      const pathCanvas = this.$refs.glassIce
      const ctx = pathCanvas.getContext('2d')
      const that = this

      pathCanvas.width = that.bgWidth
      pathCanvas.height = that.bgHeight

      ctx.save()
      // 玻璃带
      const xx = that.glassWidth
      const yy = that.glassHeight
      // ctx.fillStyle = 'rgba(215,255,97,0.9)';
      ctx.fillStyle = 'rgba(0,186,255,0.6)'
      // ctx.fillStyle = 'rgba(0,255,255,0.4)';
      // ctx.fillStyle = 'rgba(0,255,255,0.9)';
      const bx = that.glassIceEndPoint.x // 1640
      const by = that.glassIceEndPoint.y + yy / 2 // 399
      const bw = that.glassIceEndPoint.w
      const bh = yy
      ctx.beginPath()
      // ctx.rect(bx,by,bw,bh);
      // ctx.fill();
      ctx.stroke()
      ctx.restore()

      // 玻璃片 st0=705 end=1498 差值793
      // 生产数据 start=m301=0 end=m406=1217
      const st0 = that.glassIceEndPoint.x + that.glassIceEndPoint.w
      const glassWidth = 20
      const glassHeight = 35
      const glassPiece = 10
      const glassGap = 75
      const glassList = []
      for (let i = 0; i < glassPiece; i++) {
        glassList.push(glassGap * (i))
      }
      let timer2 = 0

      const bgWidth = that.bgWidth
      const bgHeight = that.bgHeight

      let timer3 = 0
      clearInterval(timer3)
      timer3 = setInterval(() => {
        ctx.clearRect(st0, 0, bgWidth, bgHeight)
        for (let i = 0; i < glassList.length; i++) {
          glassList[i] += (that.runSpeed * 60)
          if (glassList[i] < st0) {
            // 小于玻璃带不绘制
            ctx.beginPath()
            ctx.closePath()
          } else {
            // ctx.fillStyle = 'rgba(215,255,97,0.9)';
            ctx.fillStyle = 'rgba(0,186,255,0.6)'
            ctx.beginPath()
            ctx.rect(glassList[i], by, glassWidth, glassHeight)
            ctx.closePath()
            ctx.fill()
          }
        }
        if (glassList[0] >= 1455) {
          clearInterval(timer3)
        }
      }, 1000)
      if (timer3 === null) {
        cancelAnimationFrame(timer2)
        timer2 = requestAnimationFrame(function fn2() {
          ctx.clearRect(st0, 0, bgWidth, bgHeight)
          // 集体前进 定位逻辑
          // for (let i =0;i<glassList.length;i++){
          //   switch (glassList[i].route) {
          //     case "1#":
          //       // 2分板逻辑 先分离下片 主片为下片
          //       if (that.glassMode === 2) {
          //         // 向右前进类 主片基本定位
          //         if (glassList[i].position.back < m1x && glassList[i].position.turn === 0) {
          //           glassList[i].position.back = glassList[i].position.back + x;
          //           glassList[i].route2_position.back = glassList[i].position.back;
          //           glassList[i].route1_position.back = glassList[i].position.back;
          //           glassList[i].route2_position.up = glassList[i].position.up;
          //           glassList[i].route1_position.up = glassList[i].position.up;
          //         }
          //         // 上板向右前进类 主片继续前进 需写在主turn之前
          //         if (glassList[i].position.back >= m1x && glassList[i].position.turn === 1) {
          //           glassList[i].route1_position.back = glassList[i].route1_position.back + x;
          //         }
          //         // 下板向下前进类
          //         if (glassList[i].route2_position.back >= m1x && (glassList[i].route2_position.turn === 0 || glassList[i].route2_position.turn === 1)) {
          //           glassList[i].route2_position.turn = 1;
          //           glassList[i].position.turn = 1;
          //           glassList[i].route2_position.up = glassList[i].route2_position.up + x;
          //         }
          //
          //         // 上板向上前进类
          //         if (glassList[i].route1_position.back >= m2x && (glassList[i].route1_position.turn === 0 || glassList[i].route1_position.turn === 1)) {
          //           glassList[i].position.turn = 2;
          //           glassList[i].route1_position.turn = 1;
          //           glassList[i].route1_position.up = glassList[i].route1_position.up - x;
          //         }
          //         // 预测线等传递用数据更新
          //         glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //         glassList[i].route1_position.front = glassList[i].route1_position.back + glassList[i].width;
          //         glassList[i].route2_position.front = glassList[i].route2_position.back + glassList[i].width;
          //         // 下片预判 下板向下前进类
          //         if (glassList[i].route2_position.up > m1y && glassList[i].route2_position.turn === 1) {
          //           glassList[i].route2_stopSign = 1
          //         }// 下片预判 上板向上前进类
          //         if (glassList[i].route1_position.up < m2y && glassList[i].route1_position.turn === 1) {
          //           glassList[i].route1_stopSign = 1
          //         }
          //       } else {
          //         // 1分板逻辑
          //         // 向右前进类
          //         if (glassList[i].position.back < m1x && glassList[i].position.turn === 0) {
          //           glassList[i].position.back = glassList[i].position.back + x;
          //         }
          //         // 向下前进类
          //         if (glassList[i].position.back >= m1x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
          //           glassList[i].position.turn = 1;
          //           glassList[i].position.up = glassList[i].position.up + x;
          //         }
          //         glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //
          //         // 下片预判 向下前进类
          //         if (glassList[i].position.up > m1y && glassList[i].position.turn === 1) {
          //           glassList[i].stopSign = 1
          //         }
          //       }
          //       break;
          //     case "2#":
          //       if (that.glassMode === 2) {
          //         // 向右前进类 主片基本定位
          //         if (glassList[i].position.back < m3x && glassList[i].position.turn === 0) {
          //           glassList[i].position.back = glassList[i].position.back + x;
          //           glassList[i].route2_position.back = glassList[i].position.back;
          //           glassList[i].route1_position.back = glassList[i].position.back;
          //           glassList[i].route2_position.up = glassList[i].position.up;
          //           glassList[i].route1_position.up = glassList[i].position.up;
          //         }
          //         // 上板向右前进类 主片继续前进 需写在主turn之前
          //         if (glassList[i].position.back >= m3x && glassList[i].position.turn === 1) {
          //           glassList[i].route1_position.back = glassList[i].route1_position.back + x;
          //         }
          //         // 下板向下前进类
          //         if (glassList[i].route2_position.back >= m3x && (glassList[i].route2_position.turn === 0 || glassList[i].route2_position.turn === 1)) {
          //           glassList[i].route2_position.turn = 1;
          //           glassList[i].position.turn = 1;
          //           glassList[i].route2_position.up = glassList[i].route2_position.up + x;
          //         }
          //
          //         // 上板向上前进类
          //         if (glassList[i].route1_position.back >= m4x && (glassList[i].route1_position.turn === 0 || glassList[i].route1_position.turn === 1)) {
          //           glassList[i].position.turn = 2;
          //           glassList[i].route1_position.turn = 1;
          //           glassList[i].route1_position.up = glassList[i].route1_position.up - x;
          //         }
          //         // 预测线等传递用数据更新
          //         glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //         glassList[i].route1_position.front = glassList[i].route1_position.back + glassList[i].width;
          //         glassList[i].route2_position.front = glassList[i].route2_position.back + glassList[i].width;
          //         // 下片预判 下板向下前进类
          //         if (glassList[i].route2_position.up > m3y && glassList[i].route2_position.turn === 1) {
          //           glassList[i].route2_stopSign = 1
          //         }// 下片预判 上板向上前进类
          //         if (glassList[i].route1_position.up < m4y && glassList[i].route1_position.turn === 1) {
          //           glassList[i].route1_stopSign = 1
          //         }
          //       } else {
          //         // 向右前进类
          //         if (glassList[i].position.back < m2x && glassList[i].position.turn === 0) {
          //           glassList[i].position.back = glassList[i].position.back + x;
          //         }
          //         // 向上前进类
          //         if (glassList[i].position.back >= m2x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
          //           glassList[i].position.turn = 1;
          //           glassList[i].position.up = glassList[i].position.up - x;
          //         }
          //         glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //
          //         // 下片预判 向上前进类
          //         if (glassList[i].position.up < m2y && glassList[i].position.turn === 1) {
          //           glassList[i].stopSign = 1
          //         }
          //       }
          //       break;
          //     case "3#":
          //       // 向右前进类
          //       if (glassList[i].position.back < m3x && glassList[i].position.turn === 0) {
          //         glassList[i].position.back = glassList[i].position.back + x;
          //       }
          //       // 向下前进类
          //       if (glassList[i].position.back >= m3x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
          //         glassList[i].position.turn = 1;
          //         glassList[i].position.up = glassList[i].position.up + x;
          //       }
          //       glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //
          //       // 下片预判 向下前进类
          //       if (glassList[i].position.up > m3y && glassList[i].position.turn === 1) {
          //         glassList[i].stopSign = 1
          //       }
          //       break;
          //     case "4#":
          //       // 向右前进类
          //       if (glassList[i].position.back < m4x && glassList[i].position.turn === 0) {
          //         glassList[i].position.back = glassList[i].position.back + x;
          //       }
          //       // 向上前进类
          //       if (glassList[i].position.back >= m4x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
          //         glassList[i].position.turn = 1;
          //         glassList[i].position.up = glassList[i].position.up - x;
          //       }
          //       glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //
          //       // 下片预判 向上前进类
          //       if (glassList[i].position.up < m4y && glassList[i].position.turn === 1) {
          //         glassList[i].stopSign = 1
          //       }
          //       break;
          //   }
          // }

          // 定位绘制 小于玻璃带不绘制
          for (let i = 0; i < glassList.length; i++) {
            if (timer2 === 0 || timer2 % 60 === 0) {
              glassList[i] += (that.runSpeed * 10)
            }
            if (glassList[i] < st0) {
              // 小于玻璃带不绘制
              ctx.beginPath()
              ctx.closePath()
            } else {
              // ctx.fillStyle = "rgba(215,255,97,0.6)";
              ctx.fillStyle = 'rgba(0,186,255,0.6)'
              ctx.beginPath()
              ctx.rect(glassList[i], by, glassWidth, glassHeight)
              ctx.closePath()
              ctx.fill()
            }
          }

          // 停线逻辑
          if (glassList.length < that.allGlass) {
            if (glassList[0] >= 1455) {
              console.log(timer2)
              cancelAnimationFrame(timer2)
            } else {
              timer2 = requestAnimationFrame(fn2)
            }
          } else {
            cancelAnimationFrame(timer2)
            setTimeout(() => {
              that.glassIceDraw()
            }, 2000)
          }
        })
      }
    },

    // 玻璃线控定格动画层 包含信号层
    glassMovieDraw() {
      const glassCanvas = this.$refs.glassMovie
      const ctx = glassCanvas.getContext('2d')
      const that = this

      glassCanvas.width = that.bgWidth
      glassCanvas.height = that.bgHeight

      ctx.save()
      // 玻璃带
      const xx = that.glassWidth
      const yy = that.glassHeight
      ctx.fillStyle = 'rgba(6,255,0,0.9)'
      const bx = that.glassIceEndPoint.x // 1640
      const by = that.glassIceEndPoint.y + yy / 2 // 399
      const bw = that.glassIceEndPoint.w
      const bh = yy
      ctx.beginPath()
      // ctx.rect(bx,by,bw,bh);
      // ctx.fill();
      ctx.stroke()
      ctx.restore()

      // 玻璃片 st0=705 end=1498 差值793
      // 生产数据 start=m301=0 end=m406=1217 (约1.5倍 811 -18)
      // 生产数据pos start=m301=0 end=m406=1217000 (处理方式 pos/1500 取整 -18)
      const st0 = that.glassIceEndPoint.x + that.glassIceEndPoint.w
      const glassWidth = 20
      const glassHeight = 35
      const glassPiece = 10
      const glassGap = 75
      let glassList = []
      const glassListFake = []

      // 假处理
      for (let j = 0; j < glassPiece; j++) {
        glassListFake.push(glassGap * (j))
      }
      // console.log('glassListFake', glassListFake);

      // 数据处理 已离线
      const originData = that.glassMoviePointData.data
      // originData = that.glassMoviePointDataNew.data; // 两分
      // 过滤 headAt 0 数据
      const dataResult = originData.reduce(function(acc, cur) {
        // let found = acc.find(item => item.headAt);
        if (cur.headAt !== 0) {
          const liteList = cur.liteList.reduce(function(liteAcc, liteCur) {
            if (liteCur.id !== 0) {
              liteAcc.push({
                id: liteCur.id,
                width: liteCur.width,
                level: liteCur.level,
                dest: liteCur.dest
              })
            }
            return liteAcc
          }, [])
          acc.push({
            pos: cur.pos,
            length: cur.length,
            headAt: cur.headAt,
            liteList: liteList,
            glassNum: liteList.length,
            firstWidth: liteList[0].width
          })
          // console.log(acc,cur);
          // console.log(found,acc,cur);
        }
        return acc
      }, [])
      console.log('dataResult', dataResult)

      // 玻璃定位偏移处理 pos
      const glassDataDeal = (dataResult, st0, glassList) => {
        // 真处理
        for (let i = 0; i < dataResult.length; i++) {
          const screenPos = Math.ceil(dataResult[i].pos / 1500) - 18 + st0
          glassList.push(screenPos)
        }
        // console.log('glassList', glassList);
        return glassList
      }
      // 玻璃等级分色处理
      const glassLevelColorDeal = (level) => {
        let color = 'rgb(176,255,255)'
        const defaultColor = 'rgba(0,255,255,0.4)'
        switch (level) {
          case 1:
            color = 'rgb(176,255,255)'
            break
          case 2:
            color = 'rgb(163,254,152)'
            break
          case 3:
            color = 'rgb(108,95,184)'
            break
          case 4:
            color = 'rgb(255,162,117)'
            break
          case 5:
            color = 'rgb(243,135,135)'
            break
          case 6:
            color = 'rgb(255,176,0)'
            break
        }
        return color
      }
      // 玻璃订单等级分色处理 todo 订单颜色
      const glassOrderLevelColorDeal = (level) => {
        let color = 'rgb(176,255,255)'
        switch (level) {
          case 1:
            color = 'rgb(176,255,255)'
            break
          case 2:
            color = 'rgb(163,254,152)'
            break
          case 3:
            color = 'rgb(108,95,184)'
            break
          case 4:
            color = 'rgb(255,162,117)'
            break
          case 5:
            color = 'rgb(243,135,135)'
            break
          case 6:
            color = 'rgb(255,176,0)'
            break
        }
        return color
      }
      const timer2 = 0

      const bgWidth = that.bgWidth
      const bgHeight = that.bgHeight

      let timer3 = that.timing3
      timer3 = 0
      clearInterval(that.timing3)
      that.timing3 = setInterval(() => {
        glassList = []
        // 数据处理 在线
        const dataResultInterval = that.glassMoviePointData.data.reduce(function(acc, cur) {
          // let found = acc.find(item => item.headAt);
          if (cur.headAt !== 0) {
            const liteList = cur.liteList.reduce(function(liteAcc, liteCur) {
              if (liteCur.id !== 0) {
                liteAcc.push({
                  id: liteCur.id,
                  width: liteCur.width,
                  level: liteCur.level,
                  dest: liteCur.dest
                })
              }
              return liteAcc
            }, [])
            acc.push({
              pos: cur.pos,
              length: cur.length,
              headAt: cur.headAt,
              liteList: liteList,
              glassNum: liteList.length,
              firstWidth: liteList[0].width
            })
            // console.log(acc,cur);
            // console.log(found,acc,cur);
          }
          return acc
        }, [])
        // console.log('!!!dataResultInterval!!!',dataResultInterval);
        glassList = glassDataDeal(dataResultInterval, st0, glassList)
        // console.log('[[testDataInInIn]]:', that.glassMoviePointDataTest);
        ctx.clearRect(st0, 0, bgWidth, bgHeight)
        for (let i = 0; i < glassList.length; i++) {
          // glassList[i] += (that.runSpeed * 60)
          if (glassList[i] < st0) {
            // 小于玻璃带不绘制
            ctx.beginPath()
            ctx.closePath()
          } else {
            // ctx.fillStyle = 'rgba(6,255,0,0.9)';
            // 分等 todo
            switch (dataResultInterval[i].glassNum) {
              // 1分板
              case 1:
                ctx.fillStyle = 'rgba(0,255,255,0.4)'
                ctx.fillStyle = glassLevelColorDeal(dataResultInterval[i].liteList[0].level)
                ctx.beginPath()
                ctx.rect(glassList[i], by, glassWidth, glassHeight)
                ctx.closePath()
                ctx.fill()
                break
                // 2分板
              case 2:
                ctx.fillStyle = 'rgba(0,255,255,0.4)'
                ctx.beginPath()
                // 上半
                ctx.fillStyle = glassLevelColorDeal(dataResultInterval[i].liteList[0].level)
                ctx.rect(glassList[i], by, glassWidth, glassHeight / 2 - 1)
                ctx.closePath()
                ctx.fill()

                ctx.beginPath()
                // 下半
                ctx.fillStyle = glassLevelColorDeal(dataResultInterval[i].liteList[1].level)
                ctx.rect(glassList[i], by + glassHeight / 2 + 1, glassWidth, glassHeight / 2 - 1)
                ctx.closePath()
                ctx.fill()
                break
                // 3分板 todo
              case 3:
                break
            }
          }
        }
        if (glassList[0] >= 1455) {
          console.log('timer3 cancel 6808')
          // clearInterval(that.timing3);
        }
        // 信号层乱入
        // 标识信号及文字
        // 标识信号
        // 三角图形（输入顶点）
        const triangleFill = (topPosX, topPosY) => {
          ctx.save()
          ctx.fillStyle = 'rgba(255,54,0,0.6)'
          ctx.fillStyle = 'rgba(11,255,0,0.6)'
          const halfHightY = 13
          const hightX = 13
          const startPoint = [topPosX - hightX, topPosY + halfHightY]
          ctx.moveTo(startPoint[0], startPoint[1])
          ctx.beginPath()
          ctx.lineTo(topPosX, topPosY)
          ctx.lineTo(startPoint[0], topPosY - halfHightY)
          ctx.lineTo(startPoint[0], startPoint[1]) // 闭合
          ctx.fill()
          ctx.restore()
        }
        // 横掰信号
        triangleFill(787, 398)
        // 第一个信号？
        triangleFill(338, 398)
        // 第二个信号？
        triangleFill(432, 398)
        // 标识提示文字
        const textFill = (textContent, posX, posY, font, color) => {
          ctx.save()
          ctx.fillStyle = color
          // 设置填充文字样式
          ctx.font = font
          // 设置对方式
          ctx.textAlign = 'left'
          // 设置文字及其位置
          ctx.fillText(textContent, posX, posY)
          ctx.restore()
        }
        // 落板提示 5s一次查询 wire main line drop data drop_reason1 ... drop_reason4
        textFill(that.dropTip, 730, 350, 'bold 12px Black', 'rgba(255,54,0,0.6)')

        // 堆垛信号 圆形 5s一次查询
        const stockFill = (posX, posY, radius, fillColor) => {
          ctx.save()
          ctx.fillStyle = fillColor
          ctx.strokeStyle = 'rgba(0, 0, 0)'
          // ctx.strokeStyle = 'rgba(11,255,0,0.6)';
          ctx.beginPath()
          ctx.arc(posX, posY, radius, 0, Math.PI * 2, true)
          ctx.stroke()
          ctx.fill()
          ctx.restore()
        }
        // 堆垛 主线上侧1 2 3 4 红灯 rgba(255,54,0,0.6) 白灯 rgba(219,219,219)
        stockFill(1198, 359, 5, 'rgba(11,255,0,0.6)')
        stockFill(1303, 359, 5, 'rgba(11,255,0,0.6)')
        stockFill(1407, 359, 5, 'rgba(11,255,0,0.6)')
        stockFill(1502, 359, 5, 'rgba(11,255,0,0.6)')
        // 堆垛 主线下侧1 2 3 4
        stockFill(1132, 457, 5, 'rgba(11,255,0,0.6)')
        stockFill(1254, 457, 5, 'rgba(11,255,0,0.6)')
        stockFill(1353, 457, 5, 'rgba(11,255,0,0.6)')
        stockFill(1452, 457, 5, 'rgba(11,255,0,0.6)')
        // 堆垛 支线左中
        stockFill(768, 185, 5, 'rgba(11,255,0,0.6)')
        // 堆垛 支线左上
        stockFill(935, 20, 5, 'rgba(11,255,0,0.6)')
        // 堆垛 支线右上
        stockFill(1052, 20, 5, 'rgba(11,255,0,0.6)')
        // 堆垛 支线右中
        stockFill(1220, 185, 5, 'rgba(11,255,0,0.6)')
        // stockFill(1452, 457, 5,'rgba(219,219,219)');

        // 堆垛提示类 5s一次查询
        const countFill = (allCountA, nowCountA, allCountB, nowCountB, posX, posY) => {
          ctx.save()
          ctx.fillStyle = 'rgb(0,0,0)'
          // 设置填充文字样式
          ctx.font = '600 10px Black'
          // ctx.font = "600 7px Black";
          // 设置对方式
          ctx.textAlign = 'right'
          // 设置文字及其位置
          // A盘
          ctx.fillText(allCountA, posX + 4, posY + 1)
          ctx.fillText(nowCountA, posX + 4, posY + 10)
          // B盘
          ctx.fillText(allCountB, posX + 22 + 2, posY + 1)
          ctx.fillText(nowCountB, posX + 22 + 2, posY + 9 + 1)
          ctx.restore()
        }
        // 主线上侧堆垛1
        countFill(that.mainStackTip[0][0], that.mainStackTip[0][1], that.mainStackTip[0][2], that.mainStackTip[0][3], 1244, 350)
        // 主线上侧堆垛2
        countFill(that.mainStackTip[1][0], that.mainStackTip[1][1], that.mainStackTip[1][2], that.mainStackTip[1][3], 1349 + 1, 350)
        // 主线上侧堆垛3
        countFill(that.mainStackTip[2][0], that.mainStackTip[2][1], that.mainStackTip[2][2], that.mainStackTip[2][3], 1452, 350)
        // 主线上侧堆垛4
        countFill(that.mainStackTip[3][0], that.mainStackTip[3][1], that.mainStackTip[3][2], that.mainStackTip[3][3], 1549, 350)
        // 主线下侧堆垛1
        countFill(that.mainStackTip[4][0], that.mainStackTip[4][1], that.mainStackTip[4][2], that.mainStackTip[4][3], 1179 - 1, 449)
        // 主线下侧堆垛2
        countFill(that.mainStackTip[5][0], that.mainStackTip[5][1], that.mainStackTip[5][2], that.mainStackTip[5][3], 1300 - 1, 449)
        // 主线下侧堆垛3
        countFill(that.mainStackTip[6][0], that.mainStackTip[6][1], that.mainStackTip[6][2], that.mainStackTip[6][3], 1400, 449)
        // 主线下侧堆垛4
        countFill(that.mainStackTip[7][0], that.mainStackTip[7][1], that.mainStackTip[7][2], that.mainStackTip[7][3], 1501, 449)
      }, 1000)
      if (timer3 === null) {
        cancelAnimationFrame(that.timing4)
        that.timing4 = requestAnimationFrame(function fn2() {
          ctx.clearRect(st0, 0, bgWidth, bgHeight)
          // 集体前进 定位逻辑
          // for (let i =0;i<glassList.length;i++){
          //   switch (glassList[i].route) {
          //     case "1#":
          //       // 2分板逻辑 先分离下片 主片为下片
          //       if (that.glassMode === 2) {
          //         // 向右前进类 主片基本定位
          //         if (glassList[i].position.back < m1x && glassList[i].position.turn === 0) {
          //           glassList[i].position.back = glassList[i].position.back + x;
          //           glassList[i].route2_position.back = glassList[i].position.back;
          //           glassList[i].route1_position.back = glassList[i].position.back;
          //           glassList[i].route2_position.up = glassList[i].position.up;
          //           glassList[i].route1_position.up = glassList[i].position.up;
          //         }
          //         // 上板向右前进类 主片继续前进 需写在主turn之前
          //         if (glassList[i].position.back >= m1x && glassList[i].position.turn === 1) {
          //           glassList[i].route1_position.back = glassList[i].route1_position.back + x;
          //         }
          //         // 下板向下前进类
          //         if (glassList[i].route2_position.back >= m1x && (glassList[i].route2_position.turn === 0 || glassList[i].route2_position.turn === 1)) {
          //           glassList[i].route2_position.turn = 1;
          //           glassList[i].position.turn = 1;
          //           glassList[i].route2_position.up = glassList[i].route2_position.up + x;
          //         }
          //
          //         // 上板向上前进类
          //         if (glassList[i].route1_position.back >= m2x && (glassList[i].route1_position.turn === 0 || glassList[i].route1_position.turn === 1)) {
          //           glassList[i].position.turn = 2;
          //           glassList[i].route1_position.turn = 1;
          //           glassList[i].route1_position.up = glassList[i].route1_position.up - x;
          //         }
          //         // 预测线等传递用数据更新
          //         glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //         glassList[i].route1_position.front = glassList[i].route1_position.back + glassList[i].width;
          //         glassList[i].route2_position.front = glassList[i].route2_position.back + glassList[i].width;
          //         // 下片预判 下板向下前进类
          //         if (glassList[i].route2_position.up > m1y && glassList[i].route2_position.turn === 1) {
          //           glassList[i].route2_stopSign = 1
          //         }// 下片预判 上板向上前进类
          //         if (glassList[i].route1_position.up < m2y && glassList[i].route1_position.turn === 1) {
          //           glassList[i].route1_stopSign = 1
          //         }
          //       } else {
          //         // 1分板逻辑
          //         // 向右前进类
          //         if (glassList[i].position.back < m1x && glassList[i].position.turn === 0) {
          //           glassList[i].position.back = glassList[i].position.back + x;
          //         }
          //         // 向下前进类
          //         if (glassList[i].position.back >= m1x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
          //           glassList[i].position.turn = 1;
          //           glassList[i].position.up = glassList[i].position.up + x;
          //         }
          //         glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //
          //         // 下片预判 向下前进类
          //         if (glassList[i].position.up > m1y && glassList[i].position.turn === 1) {
          //           glassList[i].stopSign = 1
          //         }
          //       }
          //       break;
          //     case "2#":
          //       if (that.glassMode === 2) {
          //         // 向右前进类 主片基本定位
          //         if (glassList[i].position.back < m3x && glassList[i].position.turn === 0) {
          //           glassList[i].position.back = glassList[i].position.back + x;
          //           glassList[i].route2_position.back = glassList[i].position.back;
          //           glassList[i].route1_position.back = glassList[i].position.back;
          //           glassList[i].route2_position.up = glassList[i].position.up;
          //           glassList[i].route1_position.up = glassList[i].position.up;
          //         }
          //         // 上板向右前进类 主片继续前进 需写在主turn之前
          //         if (glassList[i].position.back >= m3x && glassList[i].position.turn === 1) {
          //           glassList[i].route1_position.back = glassList[i].route1_position.back + x;
          //         }
          //         // 下板向下前进类
          //         if (glassList[i].route2_position.back >= m3x && (glassList[i].route2_position.turn === 0 || glassList[i].route2_position.turn === 1)) {
          //           glassList[i].route2_position.turn = 1;
          //           glassList[i].position.turn = 1;
          //           glassList[i].route2_position.up = glassList[i].route2_position.up + x;
          //         }
          //
          //         // 上板向上前进类
          //         if (glassList[i].route1_position.back >= m4x && (glassList[i].route1_position.turn === 0 || glassList[i].route1_position.turn === 1)) {
          //           glassList[i].position.turn = 2;
          //           glassList[i].route1_position.turn = 1;
          //           glassList[i].route1_position.up = glassList[i].route1_position.up - x;
          //         }
          //         // 预测线等传递用数据更新
          //         glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //         glassList[i].route1_position.front = glassList[i].route1_position.back + glassList[i].width;
          //         glassList[i].route2_position.front = glassList[i].route2_position.back + glassList[i].width;
          //         // 下片预判 下板向下前进类
          //         if (glassList[i].route2_position.up > m3y && glassList[i].route2_position.turn === 1) {
          //           glassList[i].route2_stopSign = 1
          //         }// 下片预判 上板向上前进类
          //         if (glassList[i].route1_position.up < m4y && glassList[i].route1_position.turn === 1) {
          //           glassList[i].route1_stopSign = 1
          //         }
          //       } else {
          //         // 向右前进类
          //         if (glassList[i].position.back < m2x && glassList[i].position.turn === 0) {
          //           glassList[i].position.back = glassList[i].position.back + x;
          //         }
          //         // 向上前进类
          //         if (glassList[i].position.back >= m2x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
          //           glassList[i].position.turn = 1;
          //           glassList[i].position.up = glassList[i].position.up - x;
          //         }
          //         glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //
          //         // 下片预判 向上前进类
          //         if (glassList[i].position.up < m2y && glassList[i].position.turn === 1) {
          //           glassList[i].stopSign = 1
          //         }
          //       }
          //       break;
          //     case "3#":
          //       // 向右前进类
          //       if (glassList[i].position.back < m3x && glassList[i].position.turn === 0) {
          //         glassList[i].position.back = glassList[i].position.back + x;
          //       }
          //       // 向下前进类
          //       if (glassList[i].position.back >= m3x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
          //         glassList[i].position.turn = 1;
          //         glassList[i].position.up = glassList[i].position.up + x;
          //       }
          //       glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //
          //       // 下片预判 向下前进类
          //       if (glassList[i].position.up > m3y && glassList[i].position.turn === 1) {
          //         glassList[i].stopSign = 1
          //       }
          //       break;
          //     case "4#":
          //       // 向右前进类
          //       if (glassList[i].position.back < m4x && glassList[i].position.turn === 0) {
          //         glassList[i].position.back = glassList[i].position.back + x;
          //       }
          //       // 向上前进类
          //       if (glassList[i].position.back >= m4x && (glassList[i].position.turn === 0 || glassList[i].position.turn === 1)) {
          //         glassList[i].position.turn = 1;
          //         glassList[i].position.up = glassList[i].position.up - x;
          //       }
          //       glassList[i].position.front = glassList[i].position.back + glassList[i].width;
          //
          //       // 下片预判 向上前进类
          //       if (glassList[i].position.up < m4y && glassList[i].position.turn === 1) {
          //         glassList[i].stopSign = 1
          //       }
          //       break;
          //   }
          // }

          // 定位绘制 小于玻璃带不绘制
          for (let i = 0; i < glassList.length; i++) {
            if (that.timing4 === 0 || that.timing4 % 60 === 0) {
              glassList[i] += (that.runSpeed * 10)
            }
            if (glassList[i] < st0) {
              // 小于玻璃带不绘制
              ctx.beginPath()
              ctx.closePath()
            } else {
              ctx.fillStyle = 'rgba(215,255,97,0.6)'
              ctx.beginPath()
              ctx.rect(glassList[i], by, glassWidth, glassHeight)
              ctx.closePath()
              ctx.fill()
            }
          }

          // 停线逻辑
          if (glassList.length < that.allGlass) {
            if (glassList[0] >= 1455) {
              console.log(that.timing4)
              console.log('timing4 cancel 6992')
              cancelAnimationFrame(that.timing4)
            } else {
              console.log('timing4 cancel 6995')
              that.timing4 = requestAnimationFrame(fn2)
            }
          } else {
            console.log('timing4 cancel 6998')
            cancelAnimationFrame(that.timing4)
            setTimeout(() => {
              console.log('glassMovieDraw 7002')
              that.glassMovieDraw()
            }, 2000)
          }
        })
      }
    },

    // 拖拽测试
    dragTest() {
      const dragCanvas = this.$refs.dragTest
      const ctx = dragCanvas.getContext('2d')
      const that = this
      dragCanvas.width = that.bgWidth
      dragCanvas.height = that.bgHeight
      // 分割线
      const stautsConfig = {
        // 拖拽开始
        IDLE: 0,
        // 拖拽中
        DRAG_START: 1,
        // 拖拽结束
        DRAGGING: 2
      }
      // 画布信息
      const canvasInfo = {
        status: stautsConfig.IDLE, // 拖拽状态
        dragTarget: null, // 拖拽对象
        lastEvtPos: { x: null, y: null }, // 计算偏移量坐标
        offsetEvtPos: { x: null, y: null }, // 偏移事件位置
        offset: { x: 0, y: 0 }, // 缩放偏移
        scale: 1, // 缩放比例
        scaleStep: 0.1, // 每次缩放产生的变化量
        maxScale: 2, // 最大缩放倍数
        minScale: 0.5 // 最小缩放倍数
      }
      const cirlces = []
      // 画圆
      const drawCircle = (ctx, cx, cy, r) => {
        ctx.save()
        ctx.beginPath()
        ctx.strokeStyle = 'blue'
        ctx.arc(cx, cy, r, 0, Math.PI * 2)
        ctx.stroke()
        ctx.closePath()
        ctx.restore()
      }
      // ctx.translate(100, 0);
      // 视图层绘制
      drawCircle(ctx, 100, 100, 20)
      // 数据层记录
      cirlces.push({
        x: 100,
        y: 100,
        r: 20
      })
      drawCircle(ctx, 200, 200, 30)
      cirlces.push({
        x: 200,
        y: 200,
        r: 30
      })
      // ————————————————拖拽———————————————————
      // 画布位置
      const getCanvasPosition = e => {
        return {
          x: e.offsetX,
          y: e.offsetY
        }
      }
      // 获取距离
      const getDistance = (p1, p2) => {
        return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2)
      }
      // 判断是否在圆内
      const ifInCirlce = (pos) => {
        for (let i = 0; i < cirlces.length; i++) {
          // 如果两个距离小于半径就返回
          if (getDistance(cirlces[i], pos) < cirlces[i].r) {
            return cirlces[i]
          }
        }
        return false
      }
      // 鼠标按下 'mousedown'
      dragCanvas.addEventListener('mousedown', (e) => {
        // console.log('鼠标按下');
        const canvasPosition = getCanvasPosition(e)
        const cirlceRef = ifInCirlce(canvasPosition)
        // 如果拖拽对象条件成立，系统进入拖拽状态
        if (cirlceRef) {
          // 记录拖拽目标、状态、偏移量位置、偏移事件位置
          canvasInfo.dragTarget = cirlceRef
          canvasInfo.status = stautsConfig.DRAG_START
          canvasInfo.lastEvtPos = canvasPosition
          canvasInfo.offsetEvtPos = canvasPosition
        }
      })
      // 鼠标移动
      dragCanvas.addEventListener('mousemove', e => {
        const canvasPosition = getCanvasPosition(e)
        // 如果在某个圆内，修改拖动中的鼠标样式
        if (ifInCirlce(canvasPosition)) {
          dragCanvas.style.cursor = 'all-scroll'
        } else {
          dragCanvas.style.cursor = ''
        }
        // 如果第一次距离和第二次之间大于5，代表真正的拖动（防止抖动，一按下就移动的问题）
        if (canvasInfo.status === stautsConfig.DRAG_START && getDistance(canvasPosition, canvasInfo.lastEvtPos) > 5) {
          console.log('try')
          canvasInfo.status = stautsConfig.DRAGGING
          // 更新偏移事件位置
          canvasInfo.offsetEvtPos = canvasPosition
        } else if (canvasInfo.status === stautsConfig.DRAGGING) {
          console.log('拖拽中')
          const { dragTarget } = canvasInfo
          dragTarget.x += (canvasPosition.x - canvasInfo.offsetEvtPos.x)
          dragTarget.y += (canvasPosition.y - canvasInfo.offsetEvtPos.y)
          // 拖拽时候清空并重绘圆
          ctx.clearRect(0, 0, dragCanvas.width, dragCanvas.height)
          cirlces.forEach(item => drawCircle(ctx, item.x, item.y, item.r))
          canvasInfo.offsetEvtPos = canvasPosition
        }
      })
      // 鼠标抬起
      dragCanvas.addEventListener('mouseup', e => {
        if (canvasInfo.status === stautsConfig.DRAGGING) canvasInfo.status = stautsConfig.IDLE
      })
    },

    customSetInterval(callback, interval) {
      let timer = null
      let startTime = Date.now()
      const loop = () => {
        let endTime = Date.now()
        if (endTime - startTime >= interval) {
          startTime = endTime = Date.now()
          callback(timer)
        }
        timer = window.requestAnimationFrame(loop)
      }
      loop()
      return timer
    }
  }
}
</script>

<style lang="scss" scoped>
  canvas {
    display: block;
    position: absolute;
    margin-top: 30px;
    margin-left: 120px;
  }

  .dashboard-editor-container {
    padding: 0px;
    /*background-color: rgb(240, 242, 245);*/
    position: relative;
    height: auto;

    ::v-deep .el-dialog {
      background: url('../assets/pageBg.png') no-repeat !important;
      background-size: 100% 100% !important;
      margin-top: 23vh !important;

      .el-dialog__title {
        color: #409EFF;
        font-weight: bold;
      }
    }

    .bgs {
      position: absolute;
      width: 100%;
      /*padding-left: 120px;*/
      /*background-color: #1f2d3d;*/
      /*background-color: rgb(48, 65, 86);*/

      /*background-image: url('../assets/bg.png');*/
      /*background-image: url('../assets/bg2.png');*/

      background-size: 100% auto;
      /*min-height: calc(100vh - 134px);*/
      /* 约1856*558 */
      /*min-height: calc(100vh - 319px);*/
      /*min-height: calc(100vh - 28vh);*/
      min-height: calc(100vh - 46vh);
    }

    /*canvasEmbed 尺寸*/
    .canvasEmbed {
      position: absolute;
      z-index: 20;
      /*background-color: red;*/
      width: 23.4%;
      /*width: 400px;*/
      /*height: 20vh;*/
      min-height: 36vh;
    }

    .canvasEmbed1 {
      position: absolute;
      z-index: 20;
      /*background-color: red;*/
      width: 18%;
      margin-left: 24%;
      margin-top: 1%;
      /*width: 400px;*/
      /*height: 20vh;*/
      min-height: 36vh;
    }

    .bgCanvas {
      /*margin-left: 0; // 侧边 60px 局部全屏 130px*/
    }

    #newImage {
      position: absolute;
      margin: 0 auto;
      z-index: 3;
      width: 1650px;
      height: 483px;
    }

    .newImage {
      position: absolute;
      display: none;
      margin: 0 auto;
      z-index: 3;
      width: 1650px;
      height: 483px;
    }

    #board {
      z-index: 1;
    }

    #path {
      z-index: 2;
    }

    #point {
      z-index: 6;
    }

    #glass {
      z-index: 4;
    }

    #glassSea {
      z-index: 5;
    }

    #glassIce {
      z-index: 5;
    }

    #glassMovie {
      z-index: 5;
    }

    #dragTest {
      z-index: 4;
    }

    .title {
      position: absolute;
      z-index: 5;
      /*margin-left: 675px;*/
      /*margin-left: 800px;*/
      /*<!--margin-left: ((this.screenfull.isEnabled)?(800):(675))px;-->*/
      margin-top: 10px;
      font-size: 40px;
      color: #ffffff;
    }

    .titleBg {
      position: absolute;
      z-index: 5;
      /*margin-left: 20px;*/
      /*margin-left: 150px;*/
      margin-top: 10px;
      background-image: url('../assets/title.png');
      /*background-size: auto;*/
      background-size: 100% auto;
      width: 1600px;
      height: 70px;

    }

    .btn {
      /*position: absolute;*/
      /*z-index: 5;*/
      color: #409EFF;
      /*height: auto;*/
    }

    .btnRight {
      z-index: 10;
      position: relative;
      color: #409EFF;
      float: right;
    }

    .top1 {
      position: absolute;
      margin-left: 10%;
      z-index: 10;
    }

    .top2 {
      position: absolute;
      width: 100%;
      z-index: 1;

    }

    .top3 {
      position: absolute;
      width: 100%;
      z-index: 5;

    }

    .btnTouch:hover {
      cursor: pointer;
    }

    .bot0 {
      position: absolute;
      width: 4rem;
      height: 2rem;
      /*background-color: red;*/
      top: 16.4rem;
      left: 46.4rem;
    }

    .machinery-prop-label {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
      color: #409EFF;
    }

    .machinery-prop-value {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 16px;
      text-align: left;
      color: #409EFF;
    }

    .machinery-prop-status-stop {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 18px;
      text-align: left;
      font-weight: bold;
      color: red;
    }

    .machinery-prop-status-run {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 18px;
      text-align: left;
      font-weight: bold;
      color: green;
    }

    .divider2-machinerydetail {
      width: 1px;
      height: 260px;
    }

    .cardStatus {
      position: absolute;
      top: 260px;
      margin-left: 40px;
    }

    .dataTitle {
      margin-top: 10px;
      margin-bottom: 15px;
      font-weight: bold;
      font-size: 18px;
      /*color: black;*/
      color: #409EFF;
    }

    .dataLabel {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 14px;
      color: #409EFF;
    }

    .dataValue {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 18px;
      color: green;
      text-align: right;
    }

    .machineryStatus {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: green;
      padding: 15px 20px 20px 20px;
      border: #c6c6c6 solid 1px;
      border-radius: 5px;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }

</style>
